/* ==========================================================================
   Reasoned Design Tokens · v1.0
   Precision instruments for work you can trust.
   --------------------------------------------------------------------------
   Layer 1: PRIMITIVES  (raw values; never referenced by product code)
   Layer 2: SEMANTIC    (role-based aliases; the only tokens product code uses)
   Themes:  light (default) and dark — dark re-resolves the semantic layer
            only. Components never override per-theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted. Mona Sans (SIL OFL) + IBM Plex Mono (SIL OFL).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSansVF.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/MonaSansVF-Italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     1 · PRIMITIVES — Color
     Neutral ramp: cool slate. Hue ramps: 50 → 900.
     Primitives are theme-invariant; themes remap the semantic layer.
     ------------------------------------------------------------------ */

  /* Neutral (slate) */
  --rsn-neutral-0:   #ffffff;
  --rsn-neutral-25:  #fbfcfd;
  --rsn-neutral-50:  #f6f8fa;
  --rsn-neutral-100: #eef1f4;
  --rsn-neutral-150: #e4e8ed;
  --rsn-neutral-200: #d8dee5;
  --rsn-neutral-300: #c2cad4;
  --rsn-neutral-400: #9aa6b5;
  --rsn-neutral-500: #5f6e7e;
  --rsn-neutral-600: #54626f;
  --rsn-neutral-700: #3e4b57;
  --rsn-neutral-800: #2b3540;
  --rsn-neutral-850: #232c36;
  --rsn-neutral-900: #1b232c;
  --rsn-neutral-925: #161d25;
  --rsn-neutral-950: #11161c;
  --rsn-neutral-975: #0c1014;

  /* Blue — interactive (actions, links, selection) */
  --rsn-blue-50:  #eff4fc;
  --rsn-blue-100: #dee9f9;
  --rsn-blue-200: #bdd3f3;
  --rsn-blue-300: #93b5ea;
  --rsn-blue-400: #5f8edc;
  --rsn-blue-500: #3a6fce;
  --rsn-blue-600: #2a58ac;
  --rsn-blue-700: #234a8f;
  --rsn-blue-800: #1d3c73;
  --rsn-blue-900: #17305c;

  /* Iris — intelligence (machine-originated work; never decorative) */
  --rsn-iris-50:  #f4f1fd;
  --rsn-iris-100: #e8e2fb;
  --rsn-iris-200: #d3c8f6;
  --rsn-iris-300: #b5a3ee;
  --rsn-iris-400: #9377e2;
  --rsn-iris-500: #7a58d4;
  --rsn-iris-600: #6743ba;
  --rsn-iris-700: #563a97;
  --rsn-iris-800: #452e7c;
  --rsn-iris-900: #372563;

  /* Green — positive (effective, verified, passing) */
  --rsn-green-50:  #ecf7f0;
  --rsn-green-100: #d7eedf;
  --rsn-green-200: #aedec1;
  --rsn-green-300: #7cc79d;
  --rsn-green-400: #48aa74;
  --rsn-green-500: #2b8f58;
  --rsn-green-600: #1e7b47;
  --rsn-green-700: #196239;
  --rsn-green-800: #144e2e;
  --rsn-green-900: #103e25;

  /* Amber — caution (warnings, at-risk, expiring) */
  --rsn-amber-50:  #fcf6e8;
  --rsn-amber-100: #f9ecce;
  --rsn-amber-200: #f1d99b;
  --rsn-amber-300: #e7bf5e;
  --rsn-amber-400: #d9a02a;
  --rsn-amber-500: #b98213;
  --rsn-amber-600: #96690b;
  --rsn-amber-700: #7a5508;
  --rsn-amber-800: #614406;
  --rsn-amber-900: #4d3605;

  /* Red — critical (failing, overdue, destructive) */
  --rsn-red-50:  #fcf0ef;
  --rsn-red-100: #f9dedc;
  --rsn-red-200: #f2bcb8;
  --rsn-red-300: #e8918b;
  --rsn-red-400: #d9605a;
  --rsn-red-500: #c74038;
  --rsn-red-600: #ad2f28;
  --rsn-red-700: #8f2721;
  --rsn-red-800: #74211b;
  --rsn-red-900: #5d1b16;

  /* ------------------------------------------------------------------
     1 · PRIMITIVES — Typography
     ------------------------------------------------------------------ */
  --rsn-font-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rsn-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rsn-text-100: 11px;   /* overline, micro labels        */
  --rsn-text-200: 12px;   /* captions, dense meta          */
  --rsn-text-300: 13px;   /* secondary UI, dense tables    */
  --rsn-text-400: 14px;   /* body & controls (default)     */
  --rsn-text-500: 16px;   /* emphasized body, subheads     */
  --rsn-text-600: 18px;   /* card / panel titles           */
  --rsn-text-700: 20px;   /* section headings              */
  --rsn-text-800: 24px;   /* page titles                   */
  --rsn-text-900: 28px;   /* rare display headings         */

  --rsn-weight-regular: 400;
  --rsn-weight-medium: 500;
  --rsn-weight-semibold: 600;
  --rsn-weight-bold: 700;    /* reserved: numerals in stat tiles, nothing else */

  --rsn-leading-tight: 1.25; /* headings                   */
  --rsn-leading-data: 1.35;  /* tables, dense data         */
  --rsn-leading-body: 1.5;   /* prose                      */

  --rsn-tracking-wide: 0.06em; /* overline/all-caps only   */

  /* ------------------------------------------------------------------
     1 · PRIMITIVES — Space · Size · Shape
     4px base grid.
     ------------------------------------------------------------------ */
  --rsn-space-25: 2px;
  --rsn-space-50: 4px;
  --rsn-space-100: 8px;
  --rsn-space-150: 12px;
  --rsn-space-200: 16px;
  --rsn-space-250: 20px;
  --rsn-space-300: 24px;
  --rsn-space-400: 32px;
  --rsn-space-500: 40px;
  --rsn-space-600: 48px;
  --rsn-space-800: 64px;

  --rsn-size-control-sm: 28px;
  --rsn-size-control-md: 32px;   /* default control height */
  --rsn-size-control-lg: 40px;

  --rsn-row-compact: 32px;       /* table density modes */
  --rsn-row-default: 40px;
  --rsn-row-relaxed: 48px;

  --rsn-radius-sm: 4px;    /* chips, tags, badges          */
  --rsn-radius-md: 6px;    /* controls, inputs, buttons    */
  --rsn-radius-lg: 10px;   /* cards, panels, popovers      */
  --rsn-radius-full: 999px;

  --rsn-border-hairline: 1px;

  /* ------------------------------------------------------------------
     1 · PRIMITIVES — Motion · Layer
     ------------------------------------------------------------------ */
  --rsn-duration-instant: 80ms;   /* hover washes, toggles          */
  --rsn-duration-fast: 140ms;     /* popovers, menus, tooltips      */
  --rsn-duration-base: 220ms;     /* panels, inline expansion       */
  --rsn-duration-slow: 320ms;     /* page-level transitions (rare)  */
  --rsn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rsn-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  --rsn-layer-sticky: 100;
  --rsn-layer-panel: 200;
  --rsn-layer-overlay: 300;   /* popovers, menus, dropdowns */
  --rsn-layer-modal: 400;
  --rsn-layer-toast: 500;
  --rsn-layer-tooltip: 600;
}

/* ==========================================================================
   2 · SEMANTIC — LIGHT (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --rsn-surface-page: var(--rsn-neutral-50);      /* app canvas            */
  --rsn-surface-raised: var(--rsn-neutral-0);     /* cards, tables, panels */
  --rsn-surface-sunken: var(--rsn-neutral-100);   /* wells, input groups   */
  --rsn-surface-overlay: var(--rsn-neutral-0);    /* popover, menu, modal  */
  --rsn-surface-inverse: var(--rsn-neutral-900);  /* tooltips              */
  --rsn-surface-hover: var(--rsn-neutral-50);     /* row/list hover wash   */

  /* Text */
  --rsn-text-primary: var(--rsn-neutral-900);
  --rsn-text-secondary: var(--rsn-neutral-600);
  --rsn-text-muted: var(--rsn-neutral-500);       /* smallest meta text */
  --rsn-text-disabled: var(--rsn-neutral-400);
  --rsn-text-inverse: var(--rsn-neutral-0);
  --rsn-text-link: var(--rsn-blue-600);
  --rsn-text-link-hover: var(--rsn-blue-700);

  /* Borders */
  --rsn-border-subtle: var(--rsn-neutral-150);    /* hairline dividers      */
  --rsn-border-default: var(--rsn-neutral-300);   /* control boundaries     */
  --rsn-border-strong: var(--rsn-neutral-400);    /* hover on controls      */

  /* Interactive (actions & selection) */
  --rsn-action-primary: var(--rsn-blue-600);
  --rsn-action-primary-hover: var(--rsn-blue-700);
  --rsn-action-primary-active: var(--rsn-blue-800);
  --rsn-action-selected-bg: var(--rsn-blue-50);
  --rsn-action-selected-border: var(--rsn-blue-600);
  --rsn-focus-ring: var(--rsn-blue-500);

  /* Intelligence (machine-originated work) */
  --rsn-ai-accent: var(--rsn-iris-600);
  --rsn-ai-accent-strong: var(--rsn-iris-700);
  --rsn-ai-surface: var(--rsn-iris-50);
  --rsn-ai-border: var(--rsn-iris-200);
  --rsn-ai-text: var(--rsn-iris-700);

  /* Status */
  --rsn-status-success: var(--rsn-green-600);
  --rsn-status-success-surface: var(--rsn-green-50);
  --rsn-status-success-text: var(--rsn-green-700);
  --rsn-status-warning: var(--rsn-amber-500);
  --rsn-status-warning-surface: var(--rsn-amber-50);
  --rsn-status-warning-text: var(--rsn-amber-700);
  --rsn-status-critical: var(--rsn-red-600);
  --rsn-status-critical-surface: var(--rsn-red-50);
  --rsn-status-critical-text: var(--rsn-red-700);
  --rsn-status-info: var(--rsn-blue-600);
  --rsn-status-info-surface: var(--rsn-blue-50);
  --rsn-status-info-text: var(--rsn-blue-700);
  --rsn-status-neutral: var(--rsn-neutral-500);
  --rsn-status-neutral-surface: var(--rsn-neutral-100);
  --rsn-status-neutral-text: var(--rsn-neutral-700);

  /* Elevation — shadows carry theme (dark needs deeper shadows) */
  --rsn-shadow-raised:  0 1px 2px rgba(17, 22, 28, 0.06);
  --rsn-shadow-overlay: 0 4px 12px rgba(17, 22, 28, 0.10), 0 1px 3px rgba(17, 22, 28, 0.08);
  --rsn-shadow-modal:   0 16px 40px rgba(17, 22, 28, 0.18), 0 2px 6px rgba(17, 22, 28, 0.10);

  /* Data visualization — categorical slots (fixed order, never cycled) */
  --rsn-chart-1: #2a63c9;  /* blue    */
  --rsn-chart-2: #12836a;  /* teal    */
  --rsn-chart-3: #d98d0b;  /* amber   */
  --rsn-chart-4: #4f7d16;  /* green   */
  --rsn-chart-5: #7a58d4;  /* iris    */
  --rsn-chart-6: #c74038;  /* red     */
  --rsn-chart-7: #bf5b9d;  /* magenta */
  --rsn-chart-8: #d96227;  /* orange  */
  --rsn-chart-grid: var(--rsn-neutral-150);
  --rsn-chart-axis: var(--rsn-neutral-300);

  /* Risk heat scale (5×5 matrix; sequential, not status) */
  --rsn-heat-1: #e8f0e9;
  --rsn-heat-2: #f3ecd2;
  --rsn-heat-3: #f5ddb0;
  --rsn-heat-4: #f0bd93;
  --rsn-heat-5: #e79a8e;
}

/* ==========================================================================
   2 · SEMANTIC — DARK
   Surfaces re-stack: page darkest, raised sits *lighter* than page.
   Hues re-step: text/accents move up-ramp (lighter), surfaces become
   low-opacity washes. Chart slots re-validated for dark.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --rsn-surface-page: var(--rsn-neutral-975);
  --rsn-surface-raised: var(--rsn-neutral-925);
  --rsn-surface-sunken: var(--rsn-neutral-950);
  --rsn-surface-overlay: var(--rsn-neutral-900);
  --rsn-surface-inverse: var(--rsn-neutral-100);
  --rsn-surface-hover: rgba(255, 255, 255, 0.04);

  /* Text */
  --rsn-text-primary: #e8edf2;
  --rsn-text-secondary: #a7b3c0;
  --rsn-text-muted: #8b98a7;
  --rsn-text-disabled: #5a6673;
  --rsn-text-inverse: var(--rsn-neutral-925);
  --rsn-text-link: #7aa5e8;
  --rsn-text-link-hover: #9dbdf0;

  /* Borders */
  --rsn-border-subtle: #2a333d;
  --rsn-border-default: #3d4854;
  --rsn-border-strong: #545f6c;

  /* Interactive — lighter fills with dark text; dark inks fail on mid blues */
  --rsn-action-primary: #6591e2;
  --rsn-action-primary-hover: #7aa5e8;
  --rsn-action-primary-active: #90b5ee;
  --rsn-action-selected-bg: rgba(93, 141, 220, 0.14);
  --rsn-action-selected-border: #6591e2;
  --rsn-focus-ring: #7aa5e8;

  /* Intelligence */
  --rsn-ai-accent: #a78fe8;
  --rsn-ai-accent-strong: #bda9f0;
  --rsn-ai-surface: rgba(147, 119, 226, 0.12);
  --rsn-ai-border: rgba(167, 143, 232, 0.35);
  --rsn-ai-text: #c3b1f2;

  /* Status */
  --rsn-status-success: #4cae7c;
  --rsn-status-success-surface: rgba(72, 170, 116, 0.12);
  --rsn-status-success-text: #7ecfa4;
  --rsn-status-warning: #d9a02a;
  --rsn-status-warning-surface: rgba(217, 160, 42, 0.12);
  --rsn-status-warning-text: #e5bb63;
  --rsn-status-critical: #dd6a63;
  --rsn-status-critical-surface: rgba(217, 96, 90, 0.13);
  --rsn-status-critical-text: #ec9a95;
  --rsn-status-info: #6591e2;
  --rsn-status-info-surface: rgba(95, 142, 220, 0.13);
  --rsn-status-info-text: #9dbdf0;
  --rsn-status-neutral: #8b98a7;
  --rsn-status-neutral-surface: rgba(154, 166, 181, 0.12);
  --rsn-status-neutral-text: #b4bfcb;

  /* Elevation — dark surfaces need stronger, tighter shadows */
  --rsn-shadow-raised:  0 1px 2px rgba(0, 0, 0, 0.35);
  --rsn-shadow-overlay: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --rsn-shadow-modal:   0 16px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);

  /* Charts — re-stepped for dark canvases */
  --rsn-chart-1: #6c9ce8;
  --rsn-chart-2: #3fb59a;
  --rsn-chart-3: #e2ab45;
  --rsn-chart-4: #8dbb4d;
  --rsn-chart-5: #a78fe8;
  --rsn-chart-6: #e07d76;
  --rsn-chart-7: #d585ba;
  --rsn-chart-8: #e58a55;
  --rsn-chart-grid: #2a333d;
  --rsn-chart-axis: #3d4854;

  /* Risk heat scale */
  --rsn-heat-1: #22301f;
  --rsn-heat-2: #37331b;
  --rsn-heat-3: #4a3c1a;
  --rsn-heat-4: #55351f;
  --rsn-heat-5: #582823;
}