/**
 * FS27 Food Safety Culture Design Tokens
 * Google Stitch DESIGN.md & Material Design 3 (M3) Compliant
 * Fonts: Lato (English/Numbers) + M PLUS 1 (Japanese)
 */

:root {
  /* Brand Core Colors (M3 Spec) */
  --md-sys-color-primary: #181B39;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E0E2FF;
  --md-sys-color-on-primary-container: #00105C;
  --md-sys-color-secondary: #5C628E;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E1E0FF;
  --md-sys-color-on-secondary-container: #181937;
  --md-sys-color-tertiary: #D81B60;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #3D001D;

  /* Surfaces & Backgrounds (Clean & Flat, High Contrast) */
  --md-sys-color-background: #F5F6F8;
  --md-sys-color-on-background: #181B24;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #181B24;
  --md-sys-color-surface-variant: #EEF0F4;
  --md-sys-color-on-surface-variant: #424654;
  --md-sys-color-surface-container: #FFFFFF;
  --md-sys-color-surface-container-high: #F0F2F6;

  /* Borders & Dividers */
  --md-sys-color-outline: #727684;
  --md-sys-color-outline-variant: #E2E8F0;
  --border-subtle: 1px solid var(--md-sys-color-outline-variant);

  /* Risk Tiers - Certified FS27 Semantic Colors */
  --color-risk-critical: #D32F2F;
  --color-risk-critical-bg: #FFEBEE;
  --color-risk-critical-border: #FFCDD2;
  --color-risk-critical-text: #B71C1C;

  --color-risk-emerging: #7B1FA2;
  --color-risk-emerging-bg: #F3E5F5;
  --color-risk-emerging-border: #E1BEE7;
  --color-risk-emerging-text: #4A148C;

  --color-risk-major: #E65100;
  --color-risk-major-bg: #FFF3E0;
  --color-risk-major-border: #FFE0B2;
  --color-risk-major-text: #BF360C;

  --color-risk-minor: #0288D1;
  --color-risk-minor-bg: #E1F5FE;
  --color-risk-minor-border: #B3E5FC;
  --color-risk-minor-text: #01579B;

  --color-risk-pass: #2E7D32;
  --color-risk-pass-bg: #E8F5E9;
  --color-risk-pass-border: #C8E6C9;
  --color-risk-pass-text: #1B5E20;

  --color-risk-info: #455A64;
  --color-risk-info-bg: #ECEFF1;
  --color-risk-info-border: #CFD8DC;
  --color-risk-info-text: #263238;

  /* Typography: Lato (English) + M PLUS 1 (Japanese) */
  --font-family-base: 'Lato', 'M PLUS 1', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Roboto Mono', 'Fira Code', monospace;

  /* Elevations */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --elevation-2: 0 3px 6px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
  --elevation-3: 0 8px 16px rgba(15, 23, 42, 0.12), 0 4px 6px rgba(15, 23, 42, 0.06);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-button: 9999px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme */
[data-theme="dark"] {
  --md-sys-color-primary: #BAC3FF;
  --md-sys-color-on-primary: #181B39;
  --md-sys-color-primary-container: #2A2E56;
  --md-sys-color-on-primary-container: #E0E2FF;
  --md-sys-color-secondary: #C3C5F2;
  --md-sys-color-on-secondary: #2C3058;
  --md-sys-color-secondary-container: #434873;
  --md-sys-color-on-secondary-container: #E1E0FF;

  --md-sys-color-background: #0F1420;
  --md-sys-color-on-background: #E3E5ED;
  --md-sys-color-surface: #171D2B;
  --md-sys-color-on-surface: #E3E5ED;
  --md-sys-color-surface-variant: #22293A;
  --md-sys-color-on-surface-variant: #B9BDCA;
  --md-sys-color-surface-container: #1D2434;
  --md-sys-color-surface-container-high: #262E40;

  --md-sys-color-outline: #8B90A0;
  --md-sys-color-outline-variant: #2E374A;

  --color-risk-critical: #EF5350;
  --color-risk-critical-bg: #370B0E;
  --color-risk-critical-border: #6B171C;
  --color-risk-critical-text: #FFCDD2;

  --color-risk-emerging: #AB47BC;
  --color-risk-emerging-bg: #2B0D38;
  --color-risk-emerging-border: #5A1B75;
  --color-risk-emerging-text: #F3E5F5;

  --color-risk-major: #FB8C00;
  --color-risk-major-bg: #3A1800;
  --color-risk-major-border: #6E3000;
  --color-risk-major-text: #FFE0B2;

  --color-risk-minor: #29B6F6;
  --color-risk-minor-bg: #00273D;
  --color-risk-minor-border: #00507A;
  --color-risk-minor-text: #B3E5FC;

  --color-risk-pass: #2E7D32;
  --color-risk-pass-bg: #0A2E12;
  --color-risk-pass-border: #155A24;
  --color-risk-pass-text: #C8E6C9;

  --color-risk-info: #78909C;
  --color-risk-info-bg: #1B2428;
  --color-risk-info-border: #37474F;
  --color-risk-info-text: #CFD8DC;

  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.6);
  --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.8);
}

/* OLED Pure Black Theme */
[data-theme="oled"] {
  --md-sys-color-primary: #BAC3FF;
  --md-sys-color-on-primary: #00105C;
  --md-sys-color-primary-container: #1C2340;
  --md-sys-color-on-primary-container: #E0E2FF;
  --md-sys-color-secondary: #C3C5F2;
  --md-sys-color-on-secondary: #2C3058;

  --md-sys-color-background: #000000;
  --md-sys-color-on-background: #EDEDED;
  --md-sys-color-surface: #000000;
  --md-sys-color-on-surface: #EDEDED;
  --md-sys-color-surface-variant: #0D0E12;
  --md-sys-color-on-surface-variant: #B0B0B0;
  --md-sys-color-surface-container: #0A0A0C;
  --md-sys-color-surface-container-high: #141418;

  --md-sys-color-outline: #8B90A0;
  --md-sys-color-outline-variant: #242428;

  --color-risk-critical: #EF5350;
  --color-risk-critical-bg: #220002;
  --color-risk-critical-border: #4D0005;
  --color-risk-critical-text: #FFCDD2;

  --color-risk-emerging: #AB47BC;
  --color-risk-emerging-bg: #1C0024;
  --color-risk-emerging-border: #3D0052;
  --color-risk-emerging-text: #F3E5F5;

  --color-risk-major: #FB8C00;
  --color-risk-major-bg: #261000;
  --color-risk-major-border: #522200;
  --color-risk-major-text: #FFE0B2;

  --color-risk-minor: #29B6F6;
  --color-risk-minor-bg: #001A29;
  --color-risk-minor-border: #003657;
  --color-risk-minor-text: #B3E5FC;

  --color-risk-pass: #2E7D32;
  --color-risk-pass-bg: #001E06;
  --color-risk-pass-border: #00450D;
  --color-risk-pass-text: #C8E6C9;

  --color-risk-info: #78909C;
  --color-risk-info-bg: #111618;
  --color-risk-info-border: #263238;
  --color-risk-info-text: #CFD8DC;

  --elevation-1: 0 0 0 1px var(--md-sys-color-outline-variant);
  --elevation-2: 0 0 0 1px var(--md-sys-color-outline);
  --elevation-3: 0 0 0 2px var(--md-sys-color-primary);
}