/**
 * Torchcraft Forensics - Google Material 3 Expressive Tokens
 * Brand Guide:
 * - Titels: Hobo No2 Bold / Baloo 2
 * - Ondertitels / body: Baloo 2
 * - Kleuren: #f9bd12 (Goud), #f79021 (Oranje), #4e3e27 (Bruin), #000000 (Zwart), #ffffff (Wit)
 * - Gradient: linear-gradient(135deg, #fbd51f, #f4973d)
 * - Achtergrond: Zuiver Wit (#ffffff) in Light mode, Zuiver Zwart (#000000) in Dark mode.
 */

@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/lilita-one.woff2') format('woff2');
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/baloo2.woff2') format('woff2');
}

:root,
[data-theme="light"] {
  /* Brand Constants */
  --tc-color-gold: #b45309;
  --tc-color-gold-bright: #d97706;
  --tc-color-orange: #ea580c;
  --tc-color-brown: #372a18;
  --tc-gradient-torch: linear-gradient(135deg, #f9bd12, #f79021);
  --tc-gradient-torch-hover: linear-gradient(135deg, #f79021, #f9bd12);

  /* Light Theme (Strikt Zuiver Wit #ffffff & schone moderne oppervlakken) */
  --md-sys-color-primary: #ea580c;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffedd5;
  --md-sys-color-on-primary-container: #7c2d12;

  --md-sys-color-secondary: #d97706;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #fef3c7;
  --md-sys-color-on-secondary-container: #78350f;

  --md-sys-color-tertiary: #4e3e27;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f3ece0;
  --md-sys-color-on-tertiary-container: #261e13;

  --md-sys-color-error: #dc2626;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fee2e2;
  --md-sys-color-on-error-container: #7f1d1d;

  --md-sys-color-warning: #d97706;
  --md-sys-color-warning-container: #fef3c7;
  --md-sys-color-on-warning-container: #78350f;

  --md-sys-color-success: #16a34a;
  --md-sys-color-success-container: #dcfce7;
  --md-sys-color-on-success-container: #14532d;

  /* Strikt Witte Achtergrond & M3 Oppervlakken */
  --md-sys-color-background: #ffffff;
  --md-sys-color-on-background: #111827;

  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #111827;
  --md-sys-color-on-surface-variant: #4b5563;
  --md-sys-color-surface-dim: #f3f4f6;
  --md-sys-color-surface-bright: #ffffff;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f9fafb;
  --md-sys-color-surface-container: #ffffff;
  --md-sys-color-surface-container-high: #f3f4f6;
  --md-sys-color-surface-container-highest: #e5e7eb;

  --md-sys-color-outline: #6b7280;
  --md-sys-color-outline-variant: #e5e7eb;

  /* Typography Scale */
  --md-sys-font-display: 'Hobo No2 Bold', 'Hobo Std', 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-font-body: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Shapes & Radii */
  --md-sys-shape-none: 0px;
  --md-sys-shape-extra-small: 8px;
  --md-sys-shape-small: 12px;
  --md-sys-shape-medium: 16px;
  --md-sys-shape-large: 22px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-pill: 9999px;

  /* Springs & Motion */
  --md-sys-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --md-sys-motion-duration-short: 180ms;
  --md-sys-motion-duration-medium: 280ms;
  --md-sys-motion-duration-long: 450ms;

  /* Elevations */
  --md-sys-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

  --md-sys-glow-torch: 0 0 20px rgba(247, 144, 33, 0.25);
  --md-sys-glow-gold: 0 0 20px rgba(249, 189, 18, 0.3);

  /* Contrast & Theme Helpers */
  --sidebar-text: #374151;
  --sidebar-hover-bg: #f3f4f6;
  --sidebar-hover-text: #111827;
  --metric-num-color: #b45309;
  --sidebar-title-color: #b45309;
}

/* Dark Theme (Strikt Zuiver Zwart #000000 Achtergrond) */
[data-theme="dark"] {
  --tc-color-gold: #f9bd12;
  --tc-color-gold-bright: #f9bd12;
  --tc-color-orange: #f79021;
  --tc-color-brown: #4e3e27;
  --tc-gradient-torch: linear-gradient(135deg, #fbd51f, #f4973d);
  --tc-gradient-torch-hover: linear-gradient(135deg, #f79021, #fbd51f);

  --md-sys-color-primary: #f9bd12;
  --md-sys-color-on-primary: #000000;
  --md-sys-color-primary-container: #4e3e27;
  --md-sys-color-on-primary-container: #fef5d0;

  --md-sys-color-secondary: #f79021;
  --md-sys-color-on-secondary: #000000;
  --md-sys-color-secondary-container: #3a2e1d;
  --md-sys-color-on-secondary-container: #fff1d6;

  --md-sys-color-tertiary: #fbd51f;
  --md-sys-color-on-tertiary: #000000;
  --md-sys-color-tertiary-container: #352b1b;
  --md-sys-color-on-tertiary-container: #fef8dd;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-warning: #ffb870;
  --md-sys-color-warning-container: #6d3a00;
  --md-sys-color-on-warning-container: #ffddb8;

  --md-sys-color-success: #87d5a4;
  --md-sys-color-success-container: #005231;
  --md-sys-color-on-success-container: #a3f2be;

  /* Strikt Zwarte Achtergrond */
  --md-sys-color-background: #000000;
  --md-sys-color-on-background: #ffffff;

  --md-sys-color-surface: #000000;
  --md-sys-color-on-surface: #ffffff;
  --md-sys-color-on-surface-variant: #9c9183;
  --md-sys-color-surface-dim: #050505;
  --md-sys-color-surface-bright: #24221f;

  --md-sys-color-surface-container-lowest: #080807;
  --md-sys-color-surface-container-low: #131210;
  --md-sys-color-surface-container: #1b1916;
  --md-sys-color-surface-container-high: #24221e;
  --md-sys-color-surface-container-highest: #302c27;

  --md-sys-color-outline: #9c9183;
  --md-sys-color-outline-variant: #3a342b;

  --md-sys-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.7);
  --md-sys-elevation-2: 0 4px 10px -1px rgba(0, 0, 0, 0.8);
  --md-sys-elevation-3: 0 12px 24px -2px rgba(0, 0, 0, 0.9);

  --md-sys-glow-torch: 0 0 28px rgba(247, 144, 33, 0.45);
  --md-sys-glow-gold: 0 0 28px rgba(249, 189, 18, 0.5);

  --sidebar-text: #e6e1d8;
  --sidebar-hover-bg: #24221e;
  --sidebar-hover-text: #ffffff;
  --metric-num-color: #f9bd12;
  --sidebar-title-color: #f9bd12;
}