/* =====================================================================
   SIA Books - tokens.css
   The ONLY file in the codebase permitted to contain a color literal
   or a raw pixel dimension. Everything else consumes these variables.

   Two layers, deliberately:
     LAYER 1  primitives  - fixed palette. Never referenced by components.
     LAYER 2  semantics   - what components actually use. These flip
                            between light and dark; primitives do not.

   Never write  color: var(--gray-600)  in a component.
   Write        color: var(--text-secondary).
   ===================================================================== */


/* ---------------------------------------------------------------------
   LAYER 1 - PRIMITIVES
   Neutral, very slightly cool. No warm/beige cast anywhere.
   --------------------------------------------------------------------- */
:root {
  /* Neutrals */
  --n-000: #FFFFFF;
  --n-025: #FAFAFB;
  --n-050: #F4F4F6;
  --n-100: #E8E8EC;
  --n-200: #D3D3DA;
  --n-300: #B4B4BE;
  --n-400: #91919C;
  --n-500: #74747F;
  --n-600: #5C5C66;
  --n-700: #43434B;
  --n-800: #2A2A30;
  --n-850: #202024;
  --n-900: #18181B;
  --n-950: #101012;

  /* Brand - SIA red. Identity only: heading rules, active nav, links,
     focus ring. NEVER a button fill except destructive confirm.
     Verify these against the logo before shipping. */
  --brand-500: #C8102E;
  --brand-600: #A80D26;
  --brand-400: #E23A54;
  --brand-050: #FDECEE;
  --brand-950: #3D0710;

  /* Semantic hues */
  --green-600: #0F7B3D;  --green-400: #34C77B;  --green-050: #E8F5EC;  --green-950: #06301A;
  --amber-600: #A45C00;  --amber-400: #E0A33A;  --amber-050: #FDF3E3;  --amber-950: #33220A;
  --red-600:   #C0261B;  --red-400:   #F0705F;  --red-050:   #FDECEA;  --red-950:   #3A0F0B;
  --blue-600:  #1B5FA8;  --blue-400:  #5AA0E6;  --blue-050:  #EAF2FB;  --blue-950:  #0A2440;


/* ---------------------------------------------------------------------
   TYPE - identical in both themes
   --------------------------------------------------------------------- */
  --font-ui: Metropolis, Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", "Cascadia Mono", monospace;

  --text-xs:   11px;   /* table headers, micro-labels, kbd */
  --text-sm:   12px;   /* secondary text, meta, helper prose */
  --text-base: 14px;   /* body, table cells, inputs, buttons */
  --text-lg:   16px;   /* section headings */
  --text-xl:   20px;   /* page title */
  --text-2xl:  26px;   /* rare - login, empty-app states */

  --leading-tight:  1.3;
  --leading-base:   1.5;
  --leading-prose:  1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --tracking-caps: .08em;   /* uppercase section labels */
  --tracking-head: .06em;   /* uppercase table headers */

  --measure: 68ch;          /* max width for any prose block */


/* ---------------------------------------------------------------------
   SPACE - 4px base. No other spacing values are permitted.
   --------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;


/* ---------------------------------------------------------------------
   SHAPE / SIZE
   --------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 999px;

  --control-h:    32px;   /* every input, select, and button */
  --control-h-sm: 26px;   /* table row actions only */
  --row-h:        36px;   /* table body rows */
  --sidebar-w:   236px;
  --sidebar-w-collapsed: 56px;
  --border-w:     1px;


/* ---------------------------------------------------------------------
   MOTION
   --------------------------------------------------------------------- */
  --ease: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}


/* =====================================================================
   LAYER 2 - SEMANTIC ALIASES
   LIGHT THEME (default). Bright and clean - no warm tints.
   ===================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface:          var(--n-000);   /* page background, table body */
  --surface-sunken:   var(--n-025);   /* filter panels, table headers, tips */
  --surface-raised:   var(--n-000);   /* cards, menus, popovers */
  --surface-hover:    var(--n-050);   /* row + nav hover */
  --surface-active:   var(--n-100);   /* pressed, selected nav */
  --surface-sidebar:  var(--n-025);
  --surface-overlay:  rgba(24,24,27,.40);

  /* Text */
  --text-primary:   var(--n-900);
  --text-secondary: var(--n-600);
  --text-muted:     var(--n-400);
  --text-inverse:   var(--n-000);
  --text-on-solid:  var(--n-000);   /* on brand/danger solid fills - white in BOTH themes */
  --text-on-tint:   var(--n-900);   /* on LIGHT chip/pill fills - near-black in BOTH themes */
  --badge-stark-bg:     var(--n-000);   /* stark badge: white pill, black ring, both themes */
  --badge-stark-fg:     var(--n-900);
  --badge-stark-border: var(--n-900);
  --text-link:      var(--brand-500);

  /* Borders */
  --border:        var(--n-100);   /* hairlines: table rows, panels */
  --border-strong: var(--n-200);   /* inputs, dividers that must read */
  --border-focus:  var(--brand-500);

  /* Brand */
  --brand:         var(--brand-500);
  --brand-hover:   var(--brand-600);
  --brand-subtle:  var(--brand-050);

  /* Buttons - primary is NEUTRAL DARK, never brand red.
     Red is reserved exclusively for destructive actions. */
  --btn-primary-bg:       var(--n-900);
  --btn-primary-bg-hover: var(--n-800);
  --btn-primary-text:     var(--n-000);

  --btn-secondary-bg:       var(--n-000);
  --btn-secondary-bg-hover: var(--n-050);
  --btn-secondary-border:   var(--border-strong);
  --btn-secondary-text:     var(--text-primary);

  --btn-ghost-text:       var(--text-secondary);
  --btn-ghost-bg-hover:   var(--surface-hover);

  --btn-danger-text:      var(--red-600);
  --btn-danger-border:    var(--red-600);
  --btn-danger-bg-hover:  var(--red-050);
  --btn-danger-bg-solid:  var(--red-600);   /* confirmation step only */

  /* Status - tonal: soft background, saturated text */
  --status-success-bg: var(--green-050);  --status-success-fg: var(--green-600);
  --status-warning-bg: var(--amber-050);  --status-warning-fg: var(--amber-600);
  --status-danger-bg:  var(--red-050);    --status-danger-fg:  var(--red-600);
  --status-info-bg:    var(--blue-050);   --status-info-fg:    var(--blue-600);
  --status-neutral-bg: var(--n-050);      --status-neutral-fg: var(--n-600);

  /* Data viz / progress */
  --progress-track: var(--n-100);
  --progress-fill:  var(--green-600);

  /* Elevation - only two levels exist */
  --shadow-sm: 0 1px 2px rgba(16,16,20,.06), 0 1px 1px rgba(16,16,20,.04);
  --shadow-md: 0 4px 12px rgba(16,16,20,.10);

  --focus-ring: 0 0 0 3px rgba(200,16,46,.22);
}


/* =====================================================================
   DARK THEME
   True dark, matching the firm website's #1A1A1A–#222 bands.
   Not a "dimmed light theme" - surfaces are genuinely dark.
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --surface:          var(--n-950);
  --surface-sunken:   #17171A;
  --surface-raised:   var(--n-850);
  --surface-hover:    #1D1D21;
  --surface-active:   var(--n-800);
  --surface-sidebar:  #141417;
  --surface-overlay:  rgba(0,0,0,.60);

  --text-primary:   #E8E8EA;
  --text-secondary: #9C9CA6;
  --text-muted:     #6B6B75;
  --text-inverse:   var(--n-950);
  --text-on-solid:  var(--n-000);   /* solid red/brand fills keep white text in dark too */
  --text-on-tint:   var(--n-900);   /* light chip fills keep dark text in dark mode too */
  --badge-stark-bg:     var(--n-000);
  --badge-stark-fg:     var(--n-900);
  --badge-stark-border: var(--n-900);
  --text-link:      var(--brand-400);

  --border:        #26262C;
  --border-strong: #35353D;
  --border-focus:  var(--brand-400);

  --brand:        var(--brand-400);
  --brand-hover:  var(--brand-500);
  --brand-subtle: var(--brand-950);

  /* Primary inverts to near-white so it stays the highest-contrast
     element on the page - same rule, opposite end of the ramp. */
  --btn-primary-bg:       #E8E8EA;
  --btn-primary-bg-hover: var(--n-000);
  --btn-primary-text:     var(--n-950);

  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-secondary-border:   var(--border-strong);
  --btn-secondary-text:     var(--text-primary);

  --btn-ghost-text:      var(--text-secondary);
  --btn-ghost-bg-hover:  var(--surface-hover);

  --btn-danger-text:     var(--red-400);
  --btn-danger-border:   #6E2A22;
  --btn-danger-bg-hover: var(--red-950);
  --btn-danger-bg-solid: var(--red-600);

  --status-success-bg: var(--green-950);  --status-success-fg: var(--green-400);
  --status-warning-bg: var(--amber-950);  --status-warning-fg: var(--amber-400);
  --status-danger-bg:  var(--red-950);    --status-danger-fg:  var(--red-400);
  --status-info-bg:    var(--blue-950);   --status-info-fg:    var(--blue-400);
  --status-neutral-bg: var(--n-800);      --status-neutral-fg: #9C9CA6;

  --progress-track: var(--n-800);
  --progress-fill:  var(--green-400);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 4px 14px rgba(0,0,0,.50);

  --focus-ring: 0 0 0 3px rgba(226,58,84,.30);
}


/* THEME RESOLUTION
   CSS only ever sees data-theme="light" or "dark" - never "auto".
   Resolve the stored per-user setting server-side into the <html> tag,
   or inline in <head> BEFORE first paint to avoid a flash:

     <script>
       (function () {
         var t = document.documentElement.dataset.theme;   // server-rendered
         if (!t || t === 'auto') {
           t = window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark' : 'light';
         }
         document.documentElement.dataset.theme = t;
       })();
     </script>

   Default for a user with no saved preference is LIGHT.
   Persist the toggle against the user record, not the browser, so the
   setting follows staff across machines. */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}