/* =============================================================================
   TOKENS — single source of truth for the design system.
   Rule for agents & humans: components may ONLY reference these variables.
   Never hard-code a color, size, font, shadow, or radius in component CSS.
   =============================================================================

   Product: PublicMetrics.
   Aesthetic direction: "the modern ledger", in the PublicMetrics palette.
   Logo navy as ink, the logo's azure darkened into a readable action blue,
   and the logo's sky blue as a non-text accent. Semantic color is reserved
   for meaning: pos/neg for financial status, warn for at risk / needs
   attention. The system's signature device is the
   LEDGER RULE: a single hairline separates content; a DOUBLE rule marks
   totals and definitive figures — as in classical bookkeeping.
============================================================================= */

:root {
  /* ---------------------------------------------------------------- color */
  /* Sampled from the PublicMetrics logo:
     navy #0C2450 · azure #0092E0 · sky #00AEE8 · light sky #48C8F8        */

  /* Ink & paper (neutrals, cooled toward the brand navy) */
  --c-paper:        #F4F7FA;  /* app background */
  --c-surface:      #FFFFFF;  /* cards, tables, panels */
  --c-surface-alt:  #EAF0F6;  /* zebra rows, wells, input backgrounds */
  --c-border:       #D3DCE6;  /* hairlines, table rules */
  --c-border-strong:#94A3B4;  /* emphasized rules (ledger totals) */
  --c-ink:          #0C2450;  /* logo navy — primary text, sidebar ground */
  --c-ink-muted:    #4A5A70;  /* secondary text, labels — 7.0:1 on white */
  --c-ink-faint:    #7C8AA0;  /* 3.5:1 — disabled/decorative ONLY, never body text */

  /* Brand */
  --c-primary:        #0B5FA5;  /* logo azure, darkened to 6.6:1 — actions, links */
  --c-primary-hover:  #084B84;
  --c-on-primary:     #FFFFFF;  /* text/icons on a primary fill */
  --c-primary-tint:   #E4EFF9;  /* selected rows, subtle emphasis fills */
  --c-accent:         #00AEE8;  /* logo sky — 2.6:1 on white, so it fails even
                                   the 3:1 non-text minimum on light grounds.
                                   Chart series fills (where a label carries the
                                   meaning) and dark grounds only. Never for
                                   text, borders, icons, or state indicators. */
  --c-accent-tint:    #E0F4FD;

  /* The logo's navy→sky gradient belongs to the logo. Do not reproduce it in
     the UI: no gradient fills, no gradient text. One brand moment per page. */

  /* Semantic — money meaning ONLY. Never decorative. */
  --c-pos:       #1F7A4C;  /* on budget / surplus / positive delta */
  --c-pos-tint:  #E3F1E9;
  --c-neg:       #B3261E;  /* overrun / deficit / negative delta */
  --c-neg-tint:  #FAE9E7;
  --c-neg-hover: #94201a;
  --c-warn:      #8A5A00;  /* at risk / needs attention */
  --c-warn-tint: #F7EFDD;
  --c-info:      #0B5FA5;
  --c-info-tint: #E4EFF9;

  /* Issue — the islands' "incomplete" marker. Same red as --c-neg, which stays reserved for money. */
  --c-issue:      #B3261E;
  --c-on-issue:   #FFFFFF;
  --c-issue-tint: #FCEEEE;  /* an open box's background (SCENARIO-UI.md §4.3) */

  /* Variant series (SCENARIO-UI.md §8): a scenario's variant keeps its colour and line by its place in the order.
     The four pass the palette validator over all pairs on white (CVD ΔE 11.8, normal-vision ΔE 16.2). Gold is under
     3:1 on white, so a line always has its dash pattern and a direct label or legend: colour never carries the
     meaning alone. Not --c-pos/--c-neg, which stay reserved for money. */
  --c-series-1:     #0B5FA5;           /* blue, the reference variant; solid */
  --c-series-2:     #C8571C;           /* burnt orange */
  --c-series-3:     #0E9384;           /* teal */
  --c-series-4:     #C99A06;           /* gold */
  --series-1-dash:  none;
  --series-2-dash:  6 4;
  --series-3-dash:  2 3;
  --series-4-dash:  10 3 2 3;

  /* Focus ring (WCAG 2.4.7) — primary, not accent: it must be readable */
  --c-focus:     #0B5FA5;
  --focus-ring:  0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-focus);

  /* ----------------------------------------------------------- typography */
  --font-ui:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", "Consolas", monospace; /* budget codes, refs */

  /* Type scale (compact, data-dense) */
  --fs-xs:   0.75rem;   /* 12 — table meta, eyebrows */
  --fs-sm:   0.8125rem; /* 13 — table body, labels */
  --fs-base: 0.875rem;  /* 14 — default UI text */
  --fs-md:   1rem;      /* 16 — card titles, form inputs */
  --fs-lg:   1.25rem;   /* 20 — section headings */
  --fs-xl:   1.625rem;  /* 26 — page title */
  --fs-num:  1.75rem;   /* 28 — KPI figures */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  --lh-tight: 1.25;
  --lh-base:  1.5;

  --ls-caps: 0.04em; /* letter spacing of a small uppercase label */

  /* Numbers: always aligned. Apply to anything showing amounts. */
  --num-features: "tnum" 1, "lnum" 1; /* tabular + lining figures */

  /* -------------------------------------------------------------- spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* --------------------------------------------------------------- radius */
  --r-sm: 3px;   /* inputs, buttons, badges */
  --r-md: 6px;   /* cards, panels */
  /* No large radii: this is an instrument, not a consumer app. */

  /* --------------------------------------------------------------- shadow */
  --shadow-card:  0 1px 2px rgba(12, 36, 80, 0.07);
  --shadow-pop:   0 4px 16px rgba(12, 36, 80, 0.16); /* menus, dialogs */

  /* -------------------------------------------------- signature: ledger rules */
  --rule-hair:   1px solid var(--c-border);          /* ordinary separation */
  --rule-strong: 1px solid var(--c-border-strong);   /* section headings   */
  /* Double rule = a TOTAL or definitive figure. Use .ledger-total (see
     components.css). Never use the double rule decoratively. */

  /* --------------------------------------------------------------- layout */
  --page-max:     1440px;
  --form-aside-min-w: 26rem; /* a form's aside panel: narrower than this, it goes below the form */
  --sidebar-w:    232px;
  --control-h:    2.25rem;  /* 36px — buttons, inputs, selects: one height */
  --chip-max-w:   14rem;    /* a chip with a long name truncates; the full text is its title */
  --checklist-max-h: 16rem; /* a long checkbox list scrolls within its field */
}

/* Reduced motion: the system animates nothing essential. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}