/* Design Tokens - Material Design 3 */

:root {
  /* Color System - UI/UX Pro Max Design System */
  /* Operations Dashboard: Industrial slate + stock green */
  --color-primary: #334155;
  --color-on-primary: #FFFFFF;
  --color-secondary: #475569;
  /* #047857, not #059669: white text on the lighter green is 3.8:1 and fails
     WCAG AA (4.5:1) on every primary button; this one is 5.5:1. */
  --color-accent: #047857;
  --color-background: #F8FAFC;
  --color-foreground: #0F172A;
  /* A muted SURFACE, not muted text — it is near-white. For secondary text
     use --text-muted; this one as a text colour is invisible on white. */
  --color-muted: #F2F3F4;
  --color-border: #E6E8EA;
  --color-destructive: #DC2626;
  --color-ring: #047857;

  /* ── Surface and text scale ───────────────────────────────────────────────
   * Added so the page stylesheets can stop hardcoding hex. The light values
   * are exactly the hex they replace, so light mode is unchanged; the dark
   * block below is what those files never had.
   */
  --surface-page:   #F8FAFC;
  --surface-card:   #FFFFFF;
  --surface-sunken: #F1F5F9;
  --surface-raised: #E2E8F0;

  --text-strong: #0F172A;
  --text-body:   #334155;
  /* Both greys clear 4.5:1 on white AND on the sunken surfaces they sit on
     (table headers, chips). --text-subtle was #94A3B8: 2.6:1, unreadable. */
  --text-muted:  #5A6A80;
  --text-subtle: #64748B;

  --line-soft:   #F1F5F9;
  --line:        #E6E8EA;
  --line-strong: #CBD5E1;
  
  /* Legacy Material Design 3 aliases for compatibility */
  --md-sys-color-primary: var(--color-primary);
  --md-sys-color-on-primary: var(--color-on-primary);
  --md-sys-color-primary-container: #D1FAE5;
  --md-sys-color-on-primary-container: #064E3B;
  --md-sys-color-secondary: var(--color-secondary);
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F1F5F9;
  --md-sys-color-on-secondary-container: #0F172A;
  --md-sys-color-tertiary: var(--color-accent);
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #D1FAE5;
  --md-sys-color-on-tertiary-container: #064E3B;
  --md-sys-color-surface: var(--color-background);
  --md-sys-color-surface-variant: var(--color-muted);
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-surface-dim: #E2E8F0;
  --md-sys-color-surface-container: var(--color-background);
  --md-sys-color-surface-container-high: var(--color-muted);
  --md-sys-color-surface-container-highest: #E2E8F0;
  --md-sys-color-background: var(--color-background);
  --md-sys-color-on-background: var(--color-foreground);
  --md-sys-color-on-surface: var(--color-foreground);
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-on-surface-container: var(--color-foreground);
  --md-sys-color-on-surface-container-high: var(--color-foreground);
  --md-sys-color-on-surface-container-highest: var(--color-foreground);
  --md-sys-color-outline: #94A3B8;
  --md-sys-color-outline-variant: #E6E8EA;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #1E293B;
  --md-sys-color-inverse-on-surface: #F8FAFC;
  --md-sys-color-inverse-primary: #93C5FD;
  --md-sys-color-surface-tint: #DBEAFE;
  
  /* Semantic Colors */
  --md-sys-color-error: var(--color-destructive);
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #FEE2E2;
  --md-sys-color-on-error-container: #7F1D1D;
  --md-sys-color-success: #166534;  /* was #16A34A: 3.3:1 as text on white */
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #DCFCE7;
  --md-sys-color-on-success-container: #14532D;
  --md-sys-color-warning: #B45309;  /* was var(--color-accent), i.e. green */
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #FEF3C7;
  --md-sys-color-on-warning-container: #78350F;
  --md-sys-color-info: var(--color-secondary);
  --md-sys-color-on-info: #ffffff;
  --md-sys-color-info-container: #DBEAFE;
  --md-sys-color-on-info-container: #1E3A8A;
  
  /* Spacing System - 4px base unit */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  
  /* Typography Scale - Inter (text) + JetBrains Mono (data), both self-hosted.
     Headings share the body family and separate by weight; a display serif
     read as editorial on a console people work in all day. */
  --font-family-heading: 'Inter', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-family-body: 'Inter', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  
  --font-display-large: 57px/64px var(--font-family-heading);
  --font-display-medium: 45px/52px var(--font-family-heading);
  --font-display-small: 36px/44px var(--font-family-heading);
  --font-headline-large: 32px/40px var(--font-family-heading);
  --font-headline-medium: 28px/36px var(--font-family-heading);
  --font-headline-small: 24px/32px var(--font-family-heading);
  --font-title-large: 22px/28px var(--font-family-heading);
  --font-title-medium: 16px/24px var(--font-family-body);
  --font-title-small: 14px/20px var(--font-family-body);
  --font-body-large: 16px/24px var(--font-family-body);
  --font-body-medium: 14px/20px var(--font-family-body);
  --font-body-small: 12px/16px var(--font-family-body);
  --font-label-large: 14px/20px var(--font-family-body);
  --font-label-medium: 12px/16px var(--font-family-body);
  --font-label-small: 11px/16px var(--font-family-body);
  
  /* Border Radius - Shape System */
  --shape-corner-none: 0px;
  --shape-corner-xs: 4px;
  --shape-corner-sm: 8px;
  --shape-corner-md: 12px;
  --shape-corner-lg: 16px;
  --shape-corner-xl: 28px;
  --shape-corner-2xl: 40px;
  
  /* Elevation - Shadow System (UI/UX Pro Max) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  --elevation-level0: none;
  --elevation-level1: var(--shadow-sm);
  --elevation-level2: var(--shadow-md);
  --elevation-level3: var(--shadow-md);
  --elevation-level4: var(--shadow-lg);
  --elevation-level5: var(--shadow-xl);
  
  /* Motion */
  --motion-duration-short: 150ms;
  --motion-duration-medium: 300ms;
  --motion-duration-long: 500ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerated: cubic-bezier(0, 0, 0, 1);
  --motion-easing-accelerated: cubic-bezier(0.3, 0, 1, 1);
}

/* Dark Mode - UI/UX Pro Max Design System */
html[data-theme="dark"],
[data-theme="dark"] {
  /* Core colors for dark mode */
  --color-primary: #94A3B8;
  --color-on-primary: #0F172A;
  --color-secondary: #CBD5E1;
  --color-accent: #34D399;
  --color-background: #0F172A;
  --color-foreground: #F1F5F9;
  --color-muted: #1E293B;
  --color-border: #334155;
  --color-destructive: #F87171;
  --color-ring: #34D399;

  --surface-page:   #0F172A;
  --surface-card:   #1E293B;
  --surface-sunken: #172033;
  --surface-raised: #334155;

  --text-strong: #F1F5F9;
  --text-body:   #CBD5E1;
  --text-muted:  #94A3B8;
  --text-subtle: #8492A6;  /* was #64748B: 3.1:1 on a dark card */

  --line-soft:   #1E293B;
  --line:        #334155;
  --line-strong: #475569;
  
  /* Material Design 3 aliases for dark mode */
  --md-sys-color-primary: var(--color-primary);
  --md-sys-color-on-primary: var(--color-on-primary);
  --md-sys-color-primary-container: #064E3B;
  --md-sys-color-on-primary-container: #D1FAE5;
  --md-sys-color-secondary: var(--color-secondary);
  --md-sys-color-on-secondary: #0F172A;
  --md-sys-color-secondary-container: #1E293B;
  --md-sys-color-on-secondary-container: #E2E8F0;
  --md-sys-color-tertiary: var(--color-accent);
  --md-sys-color-on-tertiary: #78350F;
  --md-sys-color-tertiary-container: #78350F;
  --md-sys-color-on-tertiary-container: #FEF3C7;
  --md-sys-color-surface: var(--color-background);
  --md-sys-color-surface-variant: var(--color-muted);
  --md-sys-color-surface-bright: #1E293B;
  --md-sys-color-surface-dim: #020617;
  --md-sys-color-surface-container: var(--color-background);
  --md-sys-color-surface-container-high: var(--color-muted);
  --md-sys-color-surface-container-highest: #334155;
  --md-sys-color-background: var(--color-background);
  --md-sys-color-on-background: var(--color-foreground);
  --md-sys-color-on-surface: var(--color-foreground);
  --md-sys-color-on-surface-variant: #CBD5E1;
  --md-sys-color-on-surface-container: var(--color-foreground);
  --md-sys-color-on-surface-container-high: var(--color-foreground);
  --md-sys-color-on-surface-container-highest: var(--color-foreground);
  --md-sys-color-outline: #64748B;
  --md-sys-color-outline-variant: var(--color-border);
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #F8FAFC;
  --md-sys-color-inverse-on-surface: #0F172A;
  --md-sys-color-inverse-primary: #1E40AF;
  --md-sys-color-surface-tint: #1E293B;
  
  /* Semantic colors for dark mode */
  --md-sys-color-error: var(--color-destructive);
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #7F1D1D;
  --md-sys-color-on-error-container: #FEE2E2;
  --md-sys-color-success: #34D399;
  --md-sys-color-on-success: #064E3B;
  --md-sys-color-success-container: #064E3B;
  --md-sys-color-on-success-container: #D1FAE5;
  --md-sys-color-warning: #B45309;  /* was var(--color-accent), i.e. green */
  --md-sys-color-on-warning: #78350F;
  --md-sys-color-warning-container: #78350F;
  --md-sys-color-on-warning-container: #FEF3C7;
  --md-sys-color-info: var(--color-secondary);
  --md-sys-color-on-info: #1E3A8A;
  --md-sys-color-info-container: #1E3A8A;
  --md-sys-color-on-info-container: #DBEAFE;
}