/* ===========================================================================
   DESIGN TOKENS — three-layer architecture
   ---------------------------------------------------------------------------
   Layer 1  PRIMITIVE  raw values, no meaning      --green-500, --space-4
   Layer 2  SEMANTIC   role in the UI              --surface-raised, --text-muted
   Layer 3  COMPONENT  one component's contract    --kpi-pad, --table-row-h

   Components reference layer 2 and 3 only. Never a raw hex in a component
   rule — that is how 257 inline styles with hand-picked colours happened.
   =========================================================================== */

:root {
  /* =========================================================================
     LAYER 1 — PRIMITIVES
     ========================================================================= */

  /* Brand: forest emerald */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;

  /* Neutral: slate */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-850: #172033;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Status hues. The -on-dark variants are lightened so small text clears
     WCAG AA 4.5:1 against our dark surfaces — the base 500 shades do not. */
  --red-400:    #f87171;
  --red-500:    #ef4444;
  --red-on-dark:#fca5a5;
  --amber-400:  #fbbf24;
  --amber-500:  #f59e0b;
  --amber-on-dark:#fcd34d;
  --blue-400:   #60a5fa;
  --blue-500:   #3b82f6;
  --blue-on-dark:#93c5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --cyan-400:   #22d3ee;

  /* Spacing — 4px base, the only spacing values permitted */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* Type scale — 1.200 minor third, 16px base */
  --text-2xs: 0.6875rem; /* 11px — dense table meta only */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px */
  --text-base:0.9375rem; /* 15px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 2.75rem;   /* 44px — KPI figures */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* Elevation — layered shadow plus a hairline highlight, which is what
     separates a flat dark panel from one that reads as raised. */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.36), 0 1px 2px rgb(0 0 0 / 0.24);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.38), 0 2px 4px rgb(0 0 0 / 0.22);
  --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.44), 0 4px 10px rgb(0 0 0 / 0.26);
  --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.52), 0 8px 20px rgb(0 0 0 / 0.30);
  --shadow-glow-green: 0 0 0 1px rgb(16 185 129 / 0.22), 0 6px 20px rgb(16 185 129 / 0.16);
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);

  /* Motion — every duration is overridden to 0.01ms under reduced-motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 90ms;
  --duration-fast:    150ms;
  --duration-normal:  240ms;
  --duration-slow:    380ms;

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* =========================================================================
     LAYER 2 — SEMANTIC
     ========================================================================= */

  /* Surfaces, lowest to highest */
  --surface-base:     var(--slate-950);
  --surface-sunken:   #010409;
  --surface-default:  var(--slate-900);
  --surface-raised:   var(--slate-850);
  --surface-overlay:  var(--slate-800);
  --surface-inset:    rgb(2 6 23 / 0.55);
  --surface-hover:    rgb(255 255 255 / 0.045);
  --surface-active:   rgb(255 255 255 / 0.075);

  /* Text — AA-verified against --surface-default and --surface-raised */
  --text-strong:  #ffffff;
  --text-default: var(--slate-100);
  --text-muted:   var(--slate-300);   /* was slate-400; 400 fails AA at 11-12px */
  --text-subtle:  var(--slate-400);   /* 13px+ only */
  --text-inverse: var(--slate-950);
  --text-brand:   var(--green-300);   /* lifted from 400 for small-text AA */

  /* Borders */
  --border-subtle: rgb(255 255 255 / 0.07);
  --border-default:rgb(255 255 255 / 0.12);
  --border-strong: rgb(255 255 255 / 0.20);
  --border-brand:  rgb(16 185 129 / 0.45);

  /* Interactive */
  --action-primary-bg:       var(--green-600);
  --action-primary-bg-hover: var(--green-500);
  --action-primary-text:     #ffffff;
  --action-secondary-bg:       rgb(255 255 255 / 0.06);
  --action-secondary-bg-hover: rgb(255 255 255 / 0.11);
  --action-secondary-text:     var(--slate-100);
  --action-danger-bg:        #b91c1c;
  --action-danger-bg-hover:  var(--red-500);
  --action-danger-text:      #ffffff;

  /* Status — surface tint + AA-safe foreground, used as a matched pair */
  --status-ok-fg:        var(--green-300);
  --status-ok-bg:        rgb(16 185 129 / 0.14);
  --status-ok-border:    rgb(16 185 129 / 0.34);
  --status-warn-fg:      var(--amber-on-dark);
  --status-warn-bg:      rgb(245 158 11 / 0.14);
  --status-warn-border:  rgb(245 158 11 / 0.34);
  --status-danger-fg:    var(--red-on-dark);
  --status-danger-bg:    rgb(239 68 68 / 0.14);
  --status-danger-border:rgb(239 68 68 / 0.36);
  --status-info-fg:      var(--blue-on-dark);
  --status-info-bg:      rgb(59 130 246 / 0.14);
  --status-info-border:  rgb(59 130 246 / 0.34);
  --status-neutral-fg:   var(--slate-300);
  --status-neutral-bg:   rgb(148 163 184 / 0.14);
  --status-neutral-border:rgb(148 163 184 / 0.30);

  /* Focus ring — two-tone so it reads on both light and dark surfaces */
  --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--green-400);
  --focus-ring-inset: inset 0 0 0 2px var(--green-400);

  /* =========================================================================
     LAYER 3 — COMPONENT
     ========================================================================= */

  --header-h: 68px;
  --sidebar-w: 278px;
  --bottom-nav-h: 64px;

  /* 44px is the minimum comfortable touch target (WCAG 2.5.5 / iOS HIG). */
  --control-h-sm: 34px;
  --control-h-md: 40px;
  --control-h-lg: 46px;
  --tap-min: 44px;

  --card-pad: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-bg: var(--surface-raised);
  --card-border: var(--border-subtle);

  --kpi-pad: var(--space-5);
  --kpi-value-size: var(--text-4xl);

  --table-row-h: 56px;
  --table-cell-pad-x: var(--space-4);
  --table-cell-pad-y: var(--space-3);
  --table-header-bg: rgb(2 6 23 / 0.5);

  --modal-w: 620px;
  --modal-radius: var(--radius-xl);

  --input-h: var(--control-h-md);
  --input-bg: rgb(2 6 23 / 0.5);
  --input-border: var(--border-default);
  --input-border-focus: var(--green-500);
}

/* ---------------------------------------------------------------------------
   Reduced motion.
   Respects the OS setting rather than animating regardless — vestibular
   disorders make large transitions genuinely painful, and this is a tool
   people are required to use at work.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast:    0.01ms;
    --duration-normal:  0.01ms;
    --duration-slow:    0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Honour a user's forced-colors / high-contrast mode. */
@media (forced-colors: active) {
  :root {
    --border-default: CanvasText;
    --border-subtle:  CanvasText;
  }
  .badge, .btn, .kpi-card, .data-table { border: 1px solid CanvasText; }
}