/**
 * tokens.css — Inventory Analytics App (V1)
 *
 * Four-layer token architecture (ADR-029, devCode_Design_Tokens.md).
 * Values from DESIGN_SYSTEM_01.md. This is the ONLY file in the repository
 * permitted to contain hex color literals (lint gate: no-inline-styles-or-hex).
 *
 *   Layer 1  Reference   --ref-*                raw, theme-agnostic
 *   Layer 2  System      --color-*, --space-*…  semantic roles (theme-remapped)
 *   Layer 3  Component   --kpi-*, --table-*…    expressed in Layer-2 terms
 *   Layer 4  Theme       [data-theme=dark]      remaps Layer 2 only (ADR-030)
 *
 * Components consume Layer 2/3 only — never Layer 1.
 * Loaded identically in vanilla V1 and the React phase (ADR-005).
 * ECharts reads --viz-* / --chart-* via getComputedStyle (ADR-021).
 *
 * Naming (canonicalized, Sprint 7): DESIGN_SYSTEM_01 base names are the
 * canonical set — Layer-3 tokens and all components reference them. The
 * devCode_Design_Tokens §3 semantic names remain below as DEPRECATED
 * aliases (they resolve, but no new references may be written against
 * them; the alias block is removed when devCode_Design_Tokens §3 is
 * updated to the base names).
 */

/* ════════════ Layer 1 — Reference primitives ════════════ */
:root {
  /* gray ramp */
  --ref-gray-50: #F5F5F7;
  --ref-gray-100: #EBEBEE;
  --ref-gray-150: #EDEDF1;
  --ref-gray-200: #E2E2E7;
  --ref-gray-400: #9898A6;
  --ref-gray-450: #64646E; /* AA-safe muted text on white (≈5.5:1) — S12 a11y */
  --ref-gray-500: #6B7280;
  --ref-gray-600: #4B4B57;
  --ref-gray-700: #6B6B78;
  --ref-gray-800: #A8A8B3;
  --ref-gray-900: #0F0F12;
  --ref-white: #FFFFFF;
  --ref-off-white: #F8F8FA;

  /* dark-mode surface ramp */
  --ref-dark-base: #0E0E11;
  --ref-dark-01: #1A1A1F;
  --ref-dark-02: #222228;
  --ref-dark-03: #2A2A32;
  --ref-dark-outline: #35353D;
  --ref-dark-outline-variant: #2C2C33;
  --ref-dark-text: #E8E8ED;

  /* brand (blue) ramp */
  --ref-blue-50: #EFF4FF;
  --ref-blue-100: #EFF6FF;
  --ref-blue-400: #60A5FA;
  --ref-blue-500: #3B82F6;
  --ref-blue-600: #2563EB;
  --ref-blue-700: #1D4ED8;
  --ref-blue-dark-muted: #1E2D4D;
  --ref-blue-dark-info-surface: #172035;

  /* status ramps */
  --ref-red-400: #EF4444;
  --ref-red-600: #DC2626;
  --ref-red-700: #B91C1C; /* AA critical text on red-surface (≈5.9:1) — S12 a11y */
  --ref-red-surface: #FEF2F2;
  --ref-red-dark-surface: #2D1515;
  --ref-amber-400: #F59E0B;
  --ref-amber-600: #D97706;
  --ref-amber-700: #B45309; /* AA-safe warning text on light (≈5.2:1) — S12 a11y */
  --ref-amber-surface: #FFFBEB;
  --ref-amber-dark-surface: #2D2210;
  --ref-green-400: #22C55E;
  --ref-green-600: #16A34A;
  --ref-green-800: #166534; /* AA success text on green-surface (≈6.3:1) — S12 a11y */
  --ref-green-surface: #F0FDF4;
  --ref-green-dark-surface: #112212;

  /* viz ramps */
  --ref-teal-500: #10B981;
  --ref-violet-500: #8B5CF6;
  --ref-rose-500: #F43F5E;

  /* base scales */
  --ref-unit: 4px;
  --ref-radius-1: 8px;
  --ref-radius-2: 12px;
  --ref-radius-3: 16px;
}

/* ════════════ Layer 2 — System (semantic) tokens ════════════ */
:root {
  /* surfaces */
  --color-bg-base: var(--ref-gray-50);
  --color-surface-01: var(--ref-white);
  --color-surface-02: var(--ref-off-white);
  --color-surface-03: var(--ref-gray-150);
  --color-outline: var(--ref-gray-200);
  --color-outline-variant: var(--ref-gray-100);

  /* brand */
  --color-primary: var(--ref-blue-600);
  --color-primary-muted: var(--ref-blue-50);
  --color-primary-hover: var(--ref-blue-700);
  --color-on-primary: var(--ref-white);
  --color-focus-ring: var(--ref-blue-500);

  /* content */
  --color-text-primary: var(--ref-gray-900);
  --color-text-secondary: var(--ref-gray-600);
  --color-text-muted: var(--ref-gray-450); /* AA on white (was gray-400 2.84:1) */
  --color-text-on-dark: var(--ref-white);

  /* status (always icon + label, never color alone) */
  --color-critical: var(--ref-red-600);
  --color-critical-text: var(--ref-red-700); /* AA critical text on light/tinted */
  --color-critical-surface: var(--ref-red-surface);
  --color-warning: var(--ref-amber-600);
  --color-warning-text: var(--ref-amber-700); /* AA warning text on light surfaces */
  --color-warning-surface: var(--ref-amber-surface);
  --color-info: var(--ref-blue-600);
  --color-info-surface: var(--ref-blue-100);
  --color-healthy: var(--ref-green-600);
  --color-healthy-text: var(--ref-green-800); /* AA success text on light/tinted */
  --color-healthy-surface: var(--ref-green-surface);

  /* business-semantic (theme-stable) */
  --color-profit: var(--ref-green-400);
  --color-revenue: var(--ref-blue-500);
  --color-cost: var(--ref-amber-400);
  --color-loss: var(--ref-red-400);
  --color-neutral-data: var(--ref-gray-800);
  --color-stale: var(--ref-amber-600);
  --color-opportunity: var(--ref-violet-500);

  /* visualization series (fixed rotation 1→6, max 6 per chart) */
  --viz-series-1: var(--ref-blue-500);
  --viz-series-2: var(--ref-teal-500);
  --viz-series-3: var(--ref-amber-400);
  --viz-series-4: var(--ref-violet-500);
  --viz-series-5: var(--ref-rose-500);
  --viz-series-6: var(--ref-gray-500);

  /* devCode_Design_Tokens §3 semantic aliases (see naming note) */
  --color-surface-base: var(--color-bg-base);
  --color-surface-raised: var(--color-surface-01);
  --color-surface-sunken: var(--color-surface-02);
  --color-content-primary: var(--color-text-primary);
  --color-content-secondary: var(--color-text-secondary);
  --color-content-tertiary: var(--color-text-muted);
  --color-border-subtle: var(--color-outline-variant);
  --color-border-default: var(--color-outline);
  --color-border-strong: var(--color-text-muted);
  --color-success: var(--color-healthy);
  --color-error: var(--color-critical);
  --color-viz-1: var(--viz-series-1);
  --color-viz-2: var(--viz-series-2);
  --color-viz-3: var(--viz-series-3);
  --color-viz-4: var(--viz-series-4);
  --color-viz-5: var(--viz-series-5);
  --color-viz-6: var(--viz-series-6);

  /* typography */
  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --type-display-size: 57px;       --type-display-lh: 64px;      --type-display-wt: 400;
  --type-headline-lg-size: 32px;   --type-headline-lg-lh: 40px;  --type-headline-lg-wt: 400;
  --type-headline-md-size: 28px;   --type-headline-md-lh: 36px;  --type-headline-md-wt: 400;
  --type-headline-sm-size: 24px;   --type-headline-sm-lh: 32px;  --type-headline-sm-wt: 400;
  --type-title-lg-size: 22px;      --type-title-lg-lh: 28px;     --type-title-lg-wt: 500;
  --type-title-md-size: 16px;      --type-title-md-lh: 24px;     --type-title-md-wt: 500;
  --type-title-sm-size: 14px;      --type-title-sm-lh: 20px;     --type-title-sm-wt: 500;
  --type-body-lg-size: 16px;       --type-body-lg-lh: 24px;      --type-body-lg-wt: 400;
  --type-body-md-size: 14px;       --type-body-md-lh: 20px;      --type-body-md-wt: 400;
  --type-body-sm-size: 12px;       --type-body-sm-lh: 16px;      --type-body-sm-wt: 400;
  --type-label-lg-size: 14px;      --type-label-lg-lh: 20px;     --type-label-lg-wt: 500;
  --type-label-md-size: 12px;      --type-label-md-lh: 16px;     --type-label-md-wt: 500;
  --type-label-sm-size: 11px;      --type-label-sm-lh: 16px;     --type-label-sm-wt: 500;

  /* spacing (4px grid) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 20px;  --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px;

  /* radius */
  --radius-xs: 4px;
  --radius-sm: var(--ref-radius-1);
  --radius-md: var(--ref-radius-2);
  --radius-lg: var(--ref-radius-3);
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* z-index scale */
  --z-base: 0; --z-sticky: 100; --z-drawer: 200; --z-modal: 300;
  --z-toast: 400; --z-tooltip: 500;

  /* motion (reduced-motion-safe defaults; specifics refine with S3 doc) */
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* layout */
  --layout-kpi-min-width: 200px;
  --layout-row-comfortable: 52px;
  --layout-row-compact: 40px;
  --layout-sidebar-width: 240px;
}

/* ════════════ Layer 3 — Component tokens ════════════ */
:root {
  --kpi-card-bg: var(--color-surface-01);
  --kpi-card-radius: var(--radius-md);
  --kpi-card-pad: var(--space-4);
  --kpi-card-min-width: var(--layout-kpi-min-width);

  --table-row-height: var(--layout-row-comfortable); /* density swaps this */
  --table-header-bg: var(--color-surface-02);
  --table-cell-pad-x: var(--space-3);

  --button-primary-bg: var(--color-primary);
  --button-primary-fg: var(--color-on-primary);

  --action-card-border: var(--color-outline);
  --score-pill-good: var(--color-healthy);
  --score-pill-warn: var(--color-warning);
  --score-pill-bad: var(--color-critical);

  --chart-axis: var(--color-text-muted);
  --chart-grid: var(--color-outline-variant);
  --chart-series-1: var(--viz-series-1);
  --chart-series-2: var(--viz-series-2);
  --chart-series-3: var(--viz-series-3);
  --chart-series-4: var(--viz-series-4);
  --chart-series-5: var(--viz-series-5);
  --chart-series-6: var(--viz-series-6);

  --nav-active-bg: var(--color-primary-muted);
  --nav-active-fg: var(--color-primary);

  /* scrim (side sheet / modal underlay — alpha, not a hex literal) */
  --color-scrim: rgba(16, 16, 20, 0.4);

  /* shell structure (Navigation_Model §breakpoints — Sprint 7) */
  --layout-rail-width: 72px;
  --layout-topbar-height: 64px;
  --layout-bottomnav-height: 56px;
  --layout-content-max-width: 1440px;

  /* banner slot (offline/degraded/freshness — Operational_States) */
  --banner-info-bg: var(--color-info-surface);
  --banner-info-fg: var(--color-text-primary);
  --banner-warning-bg: var(--color-warning-surface);
  --banner-warning-fg: var(--color-text-primary);
  --banner-border: var(--color-outline);

  /* side sheet (BHS explainability — Organism_Components) */
  --side-sheet-width: 400px;
  --side-sheet-bg: var(--color-surface-01);

  /* skeletons (Loading state) */
  --skeleton-base: var(--color-surface-02);
  --skeleton-sheen: var(--color-surface-03);

  /* chips (alert drill-downs + freshness "updated N ago") */
  --chip-bg: var(--color-surface-02);
  --chip-fg: var(--color-text-secondary);
  --chip-active-bg: var(--color-primary-muted);
  --chip-active-fg: var(--color-primary);
  --chip-radius: var(--radius-lg);

  --disabled-opacity: 0.4; /* DESIGN_SYSTEM_02 §3.1 — no separate muted tokens */
}

/* ════════════ Density (ADR-020: Compact = analytical tables only) ════════════ */
[data-density="compact"] {
  --table-row-height: var(--layout-row-compact);
}

/* ════════════ Layer 4 — Theme (dark remaps Layer 2 only, ADR-030) ════════════ */
[data-theme="dark"] {
  --color-bg-base: var(--ref-dark-base);
  --color-surface-01: var(--ref-dark-01);
  --color-surface-02: var(--ref-dark-02);
  --color-surface-03: var(--ref-dark-03);
  --color-outline: var(--ref-dark-outline);
  --color-outline-variant: var(--ref-dark-outline-variant);

  --color-primary: var(--ref-blue-500);
  --color-primary-muted: var(--ref-blue-dark-muted);
  --color-primary-hover: var(--ref-blue-400);

  --color-text-primary: var(--ref-dark-text);
  --color-text-secondary: var(--ref-gray-800);
  --color-text-muted: var(--ref-gray-700);

  --color-critical: var(--ref-red-400);
  --color-critical-text: var(--ref-red-400); /* light text on dark tinted surface */
  --color-critical-surface: var(--ref-red-dark-surface);
  --color-warning: var(--ref-amber-400);
  --color-warning-text: var(--ref-amber-400);
  --color-warning-surface: var(--ref-amber-dark-surface);
  --color-info: var(--ref-blue-400);
  --color-info-surface: var(--ref-blue-dark-info-surface);
  --color-healthy: var(--ref-green-400);
  --color-healthy-text: var(--ref-green-400);
  --color-healthy-surface: var(--ref-green-dark-surface);
}