/* ===================================================================
   MATERIAL DESIGN 3 (M3) DESIGN TOKENS
   Theme: Cosy Modern IT (Crisp Porcelain White, Tech Cobalt, Warm Amber)
   =================================================================== */

:root {
  /* Fonts */
  --font-family-brand: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Typography Scale */
  --font-display-large: 700 3.5rem/1.15 var(--font-family-brand);
  --font-display-medium: 700 2.75rem/1.2 var(--font-family-brand);
  --font-display-small: 600 2.25rem/1.25 var(--font-family-brand);
  --font-headline-large: 600 2rem/1.3 var(--font-family-brand);
  --font-headline-medium: 600 1.75rem/1.3 var(--font-family-brand);
  --font-headline-small: 600 1.5rem/1.35 var(--font-family-brand);
  --font-title-large: 600 1.25rem/1.4 var(--font-family-brand);
  --font-title-medium: 600 1rem/1.45 var(--font-family-brand);
  --font-title-small: 600 0.875rem/1.4 var(--font-family-brand);
  --font-body-large: 400 1rem/1.6 var(--font-family-body);
  --font-body-medium: 400 0.875rem/1.55 var(--font-family-body);
  --font-body-small: 400 0.75rem/1.5 var(--font-family-body);
  --font-label-large: 500 0.875rem/1.4 var(--font-family-body);
  --font-label-medium: 500 0.75rem/1.4 var(--font-family-body);
  --font-label-small: 500 0.6875rem/1.35 var(--font-family-body);

  /* Shape Tokens (Material 3 Expressive Radii) */
  --md-shape-corner-none: 0;
  --md-shape-corner-extra-small: 4px;
  --md-shape-corner-small: 8px;
  --md-shape-corner-medium: 12px;
  --md-shape-corner-large: 16px;
  --md-shape-corner-extra-large: 24px;
  --md-shape-corner-full: 9999px;

  /* Motion & Transitions */
  --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-motion-duration-short: 150ms;
  --md-motion-duration-medium: 250ms;
  --md-motion-duration-long: 400ms;

  /* ===================================================================
     RECONFIGURED WHITE THEME (Clean, Crisp, Modern, Cosy)
     =================================================================== */
  /* Primary: Trustworthy Modern Tech Cobalt / Indigo */
  --md-sys-color-primary: #1d4ed8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eff6ff;
  --md-sys-color-on-primary-container: #1e3a8a;
  
  /* Secondary: Engineering Teal / Cyan */
  --md-sys-color-secondary: #0f766e;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #f0fdfa;
  --md-sys-color-on-secondary-container: #115e59;

  /* Tertiary: Cosy Warm Amber / Terracotta Honey */
  --md-sys-color-tertiary: #d97706;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fffbeb;
  --md-sys-color-on-tertiary-container: #92400e;

  /* Crisp White Surface & Clean Neutral Layers (No muddy beige) */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #0f172a;               /* Deep high-contrast Slate 900 */
  --md-sys-color-surface-dim: #f8fafc;              /* Slate 50 */
  --md-sys-color-surface-bright: #ffffff;           /* Crisp White */

  --md-sys-color-surface-container-lowest: #ffffff; /* Clean Card Fill */
  --md-sys-color-surface-container-low: #f8fafc;    /* Clean Alternate Section (Slate 50) */
  --md-sys-color-surface-container: #f1f5f9;        /* Clean Controls/Chips Fill (Slate 100) */
  --md-sys-color-surface-container-high: #e2e8f0;   /* Clean Dividers/Hover Fill (Slate 200) */
  --md-sys-color-surface-container-highest: #cbd5e1;/* Slate 300 */

  --md-sys-color-surface-variant: #f1f5f9;
  --md-sys-color-on-surface-variant: #475569;       /* Slate 600 - High contrast text */

  --md-sys-color-outline: #e2e8f0;                  /* Crisp borders */
  --md-sys-color-outline-variant: #f1f5f9;          /* Subtle hairlines */

  /* Functional Status Colors */
  --md-sys-color-error: #dc2626;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fef2f2;
  --md-sys-color-on-error-container: #991b1b;

  --md-sys-color-success: #16a34a;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #f0fdf4;
  --md-sys-color-on-success-container: #166534;

  /* Elevation Shadows (Modern Soft Diffuse Depth) */
  --md-elevation-level0: none;
  --md-elevation-level1: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --md-elevation-level2: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --md-elevation-level3: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --md-elevation-level4: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --md-elevation-level5: 0 25px 50px -12px rgba(15, 23, 42, 0.16);

  /* Modern Ambient & Glass Settings */
  --badge-glow: rgba(29, 78, 216, 0.12);
  --cosy-glow: rgba(217, 119, 6, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(226, 232, 240, 0.9);
}

/* ===================================================================
   DARK THEME (Cosy Nocturne Slate)
   =================================================================== */
[data-theme="dark"] {
  --md-sys-color-primary: #60a5fa;
  --md-sys-color-on-primary: #0f172a;
  --md-sys-color-primary-container: #1e3a8a;
  --md-sys-color-on-primary-container: #dbeafe;

  --md-sys-color-secondary: #2dd4bf;
  --md-sys-color-on-secondary: #042f2e;
  --md-sys-color-secondary-container: #134e4a;
  --md-sys-color-on-secondary-container: #ccfbf1;

  --md-sys-color-tertiary: #fbbf24;
  --md-sys-color-on-tertiary: #451a03;
  --md-sys-color-tertiary-container: #78350f;
  --md-sys-color-on-tertiary-container: #fef3c7;

  --md-sys-color-surface: #0b0f17;
  --md-sys-color-on-surface: #f8fafc;
  --md-sys-color-surface-dim: #070a10;
  --md-sys-color-surface-bright: #151d2c;

  --md-sys-color-surface-container-lowest: #0e1420;
  --md-sys-color-surface-container-low: #131a28;
  --md-sys-color-surface-container: #182233;
  --md-sys-color-surface-container-high: #212d42;
  --md-sys-color-surface-container-highest: #2b3952;

  --md-sys-color-surface-variant: #1e293b;
  --md-sys-color-on-surface-variant: #94a3b8;

  --md-sys-color-outline: #334155;
  --md-sys-color-outline-variant: #1e293b;

  --md-elevation-level1: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --md-elevation-level2: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --md-elevation-level3: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --md-elevation-level4: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --md-elevation-level5: 0 25px 50px -12px rgba(0, 0, 0, 0.85);

  --badge-glow: rgba(96, 165, 250, 0.2);
  --cosy-glow: rgba(251, 191, 36, 0.12);
  --glass-bg: rgba(14, 20, 32, 0.88);
  --glass-border: rgba(51, 65, 85, 0.7);
}