/* ============================================================================
   FinCheqIQ — Design Tokens  ·  Phase 1 Foundation  ·  LOCKED
   ----------------------------------------------------------------------------
   Every later phase references these by NAME. Do not introduce new raw colour,
   new radii, new shadows or new durations in any later phase. If a phase needs
   something absent here, extend THIS file and document it in DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
  /* ── 1. SURFACE / NEUTRAL BASE ──────────────────────────────────────────
     Cool, desaturated slate. Deliberately low-chroma so the status palette is
     the only saturated thing a reviewer sees in an 8-hour shift.            */
  --canvas:            #edf0f4;   /* app background                          */
  --canvas-sunken:     #e4e9ef;   /* wells, table zebra, inset regions       */
  --surface:           #ffffff;   /* card / panel / table body               */
  --surface-2:         #f6f8fa;   /* subtle fill: table head, disabled, hint */
  --surface-3:         #eef2f6;   /* pressed / selected row                  */

  --ink:               #151b22;   /* primary text — never pure black         */
  --ink-2:             #3c4753;   /* secondary text, table cell values       */
  --ink-3:             #5f6a76;   /* muted CONTENT — the quietest readable   */
  --ink-4:             #7c8794;   /* NON-TEXT only: borders, icon fill,      */
                                  /* placeholder. Never body content — it    */
                                  /* cannot reach 4.5:1 on a light surface.  */
  --ink-disabled:      #94a0ad;   /* disabled controls — WCAG 1.4.3 exempt   */

  --line:              #dde3ea;   /* hairline / default border               */
  --line-strong:       #c4ccd6;   /* input border, emphasised divider        */
  --line-inverse:      #2a3946;   /* dividers on the ink chrome              */

  /* ── 2. CHROME (sidebar / pre-auth field) ──────────────────────────────── */
  --chrome:            #16212c;   /* sidebar + auth field                    */
  --chrome-2:          #1e2c39;   /* hovered nav row                         */
  --chrome-3:          #263646;   /* active nav row backplate                */
  --chrome-ink:        #e6ecf2;   /* text on chrome                          */
  --chrome-ink-2:      #97a6b5;   /* muted text on chrome                    */
  --chrome-ink-3:      #7d8894;   /* muted text on chrome — 4.5:1 on #16212c */

  /* ── 3. BRAND — one colour, used sparingly ──────────────────────────────
     Deep Harbour. Primary action + active nav marker + focus ring ONLY.
     Never used to convey a cheque state.                                    */
  --brand:             #0f5e7a;
  --brand-hover:       #0c4f68;
  --brand-active:      #093f53;
  --brand-tint:        #e6f0f4;   /* 8% wash — active nav, selected row      */
  --brand-tint-2:      #cfe2ea;   /* 16% wash — hovered tint, meter track    */
  --brand-on:          #ffffff;   /* text on brand fill                      */
  --focus-ring:        #2e8fb0;   /* lighter harbour — visible on ink + white*/

  /* ── 4. STATUS PALETTE — the signature system ───────────────────────────
     Seven families. Colour is NEVER the only carrier: every badge also has a
     distinct glyph shape and a left state-cap. Reuse these exact tokens for
     every validation, confidence, risk and integration state in every phase. */

  /* valid / approved / acknowledged / high-confidence  ── solid disc ──── */
  --st-valid:          #0e7a56;
  --st-valid-ink:      #0a5c41;
  --st-valid-bg:       #e3f4ed;
  --st-valid-line:     #a9dcc9;

  /* review required / medium confidence / limit breach ── triangle ────── */
  --st-review:         #b4690e;
  --st-review-solid:   #8f530b;   /* amber dark enough for white text (4.5:1) */
  --st-review-ink:     #8a5009;
  --st-review-bg:      #fdf0dd;
  --st-review-line:    #f0cf9b;

  /* invalid / rejected / failed / low-confidence ── square ────────────── */
  --st-invalid:        #c1372e;
  --st-invalid-ink:    #9a2b23;
  --st-invalid-bg:     #fbeae8;
  --st-invalid-line:   #f0b8b3;

  /* processing / in-flight / retrying ── ring, animated ───────────────── */
  --st-processing:     #2e62d0;
  --st-processing-ink: #234ea8;
  --st-processing-bg:  #e8eefc;
  --st-processing-line:#bacef4;

  /* pending / queued / draft / not started ── hollow disc ─────────────── */
  --st-pending:        #5c6a7a;
  --st-pending-ink:    #47535f;
  --st-pending-bg:     #eef1f5;
  --st-pending-line:   #ccd4dd;

  /* on hold / pending external system / escalated ── diamond ──────────── */
  --st-hold:           #6b4fc7;
  --st-hold-ink:       #533c9c;
  --st-hold-bg:        #eeeafb;
  --st-hold-line:      #cbbdf0;

  /* no usable data / not detected / unreadable ── hatched bar ─────────── */
  --st-unusable:       #485563;
  --st-unusable-ink:   #333e4a;
  --st-unusable-bg:    #e9edf1;
  --st-unusable-line:  #c3ccd6;

  /* ── 4b. ARTWORK — depicted physical media, not UI ───────────────────────
     Cheque paper is a photographed object, not an interface surface. These
     four values exist so the cheque illustration stays centralised and can
     never leak into UI chrome. Nothing outside the cheque artwork uses them. */
  --paper:      #fbfaf6;
  --paper-tint: #cfd8d4;
  --paper-line: #cec8b9;
  --paper-ink:  #2c2823;
  --paper-hand: #1d3a6e;

  /* ── 4c. CODE — the payload viewer's syntax palette ──────────────────────
     Depicted machine output on the --chrome surface, like the artwork tokens
     are depicted paper. Nothing outside the code panel uses them.          */
  --code-key:  #8fd0e4;
  --code-str:  #b7dfae;
  --code-num:  #f0c987;
  --code-bool: #d2b3f0;
  --r-device:   22px;   /* depicted device bezel (breakpoint demo) */

  /* ── 5. TYPE ────────────────────────────────────────────────────────────
     Condensed grotesk for headings + dense table furniture.
     Regular grotesk for UI prose. Mono tabular for every number/ID/score.   */
  --font-head:  'IBM Plex Sans Condensed', 'Roboto Condensed', 'Segoe UI Semibold', system-ui, sans-serif;
  --font-ui:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-3xl: 30px;   --lh-3xl: 1.16;   /* auth / page hero title              */
  --fs-2xl: 24px;   --lh-2xl: 1.2;    /* page title                          */
  --fs-xl:  20px;   --lh-xl:  1.25;   /* section title                       */
  --fs-lg:  17px;   --lh-lg:  1.35;   /* card title, lead                    */
  --fs-md:  15px;   --lh-md:  1.5;    /* body / input                        */
  --fs-sm:  13.5px; --lh-sm:  1.45;   /* dense table cell, helper text       */
  --fs-xs:  12px;   --lh-xs:  1.4;    /* meta, captions                      */
  --fs-2xs: 11px;   --lh-2xs: 1.3;    /* badge, eyebrow, phase tag           */

  /* ── DISPLAY NUMERALS ─────────────────────────────────────────────────────
     A second, deliberate scale. The text scale tops out at 30px because prose
     never needs more; a KPI, a confidence score or a queue depth is read as a
     figure, not as text, and wants tabular mono at sizes the prose scale has no
     step for. Naming it stops these reappearing as loose px values.
     Micro-labels sit below the text scale for the same reason: a source chip or
     an axis tick is a mark, not a sentence.                                   */
  --fs-num-xs:  18px;   /* OTP digit                                          */
  --fs-num-sm:  22px;   /* donut centre, score cell, MFA figure               */
  --fs-num-md:  26px;   /* queue-summary value                                */
  --fs-num-lg:  28px;   /* KPI value                                          */
  --fs-num-xl:  42px;   /* KPI hero — 34px below tablet-lg                    */
  --fs-num-xl-c: 34px;  /* KPI hero, compact                                  */
  --fs-3xs:    9.5px;   /* mono micro-label: source chip, cite, axis tick     */
  --fs-4xs:      9px;   /* pip / trend caret                                  */
  --fs-micro:   10px;   /* chart axis tick, threshold-band percentage          */
  --fs-dense: 12.5px;   /* the dense data-table variant                        */
  --fs-glyph:   14px;   /* a standalone directional glyph, not prose           */
  --fs-hero:    40px;   /* launcher hero only — fluid down to --fs-num-lg      */

  --tr-tight:  -0.014em;  /* headings                                       */
  --tr-normal: -0.004em;  /* UI text                                        */
  --tr-wide:    0.06em;   /* eyebrows, badges, table heads                   */
  --tr-mono:    0.01em;   /* IDs                                            */

  /* ── 6. SPACE — 4px base ────────────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 56px;   --sp-10: 72px;

  /* ── 7. RADIUS — precise, institutional. Nothing above 12px. ────────── */
  --r-xs:   2px;   /* state caps, meter fills                              */
  --r-sm:   4px;   /* badge, tag, checkbox, small control                  */
  --r-md:   6px;   /* button, input, select                                */
  --r-lg:   8px;   /* card, panel, table shell                             */
  --r-xl:  12px;   /* modal, drawer, toast                                 */
  --r-full: 999px; /* avatar, unread dot, pill toggle                      */

  /* ── 8. ELEVATION — four steps, border + shadow together ────────────── */
  --e-0: none;
  --e-1: 0 1px 2px rgba(17, 26, 36, .05);                                       /* card    */
  --e-2: 0 4px 12px -2px rgba(17, 26, 36, .10), 0 2px 4px -2px rgba(17, 26, 36, .06); /* popover */
  --e-3: 0 24px 48px -12px rgba(17, 26, 36, .26), 0 8px 16px -8px rgba(17, 26, 36, .14); /* modal/drawer */
  --e-4: 0 14px 34px -8px rgba(17, 26, 36, .30), 0 2px 6px rgba(17, 26, 36, .10);  /* toast   */
  --e-inset: inset 0 1px 2px rgba(17, 26, 36, .06);

  /* ── 9. MOTION ──────────────────────────────────────────────────────────
     micro     — hover, focus, checkbox, colour change
     standard  — tab switch, accordion, sidebar collapse, inline validation
     emphasis  — drawer + modal enter/exit
     status    — one pulse when a badge changes state. Never a bounce.      */
  --dur-micro:    130ms;
  --dur-standard: 220ms;
  --dur-emphasis: 320ms;
  --dur-status:   900ms;
  --dur-exit:     180ms;
  --dur-count:    560ms;   /* KPI count-up on first paint — brief, never a slot machine */
  --dur-press:     60ms;   /* button press depression — the fastest thing in the system */
  --dur-reveal:   620ms;   /* masked specimen resolving from blur to sharp             */
  --dur-hold:     900ms;   /* hold-to-reveal fill; the JS timer runs 20ms longer so the
                              bar completes before the reveal fires                    */
  --stagger-step:  60ms;   /* delay between staggered panel entrances               */

  --ease-out:   cubic-bezier(.2, .8, .3, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --ease-entry: cubic-bezier(.16, 1, .3, 1);

  --motion-micro:    var(--dur-micro) var(--ease-out);
  --motion-standard: var(--dur-standard) var(--ease-inout);
  --motion-emphasis: var(--dur-emphasis) var(--ease-entry);

  /* ── 10. BREAKPOINTS — named scale, referenced in every phase ───────────
     These custom properties are documentation (CSS cannot interpolate vars
     into media queries). The literal px values below are the ONLY widths any
     phase may use in a @media rule.

       mobile      360–599     off-canvas nav, 1-col, tables → card-per-row
       mobile-lg   600–767     off-canvas nav, 2-col stats
       tablet      768–1023    off-canvas nav, 2-col, tables → scroll + sticky col
       tablet-lg   1024–1279   rail nav (icons), 3-col
       desktop     1280–1535   full sidebar, 4-col
       desktop-lg  1536+       full sidebar, wider gutters, 12-col grids     */
  --bp-mobile:     360px;
  --bp-mobile-lg:  600px;
  --bp-tablet:     768px;
  --bp-tablet-lg: 1024px;
  --bp-desktop:   1280px;
  --bp-desktop-lg:1536px;

  /* ── 11. LAYOUT CONSTANTS ───────────────────────────────────────────── */
  --sidebar-w:      264px;
  --sidebar-rail-w:  64px;
  --topbar-h:        56px;
  --gutter:        var(--sp-6);
  --z-shell:   20;
  --z-sticky:  30;
  --z-overlay: 60;
  --z-drawer:  70;
  --z-modal:   80;
  --z-toast:   90;
  --z-tooltip: 95;
}

/* ── reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-head); font-weight: 600; letter-spacing: var(--tr-tight); text-wrap: balance; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
[hidden] { display: none !important; }

/* Focus: one ring, everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── type helpers ───────────────────────────────────────────────────────── */
.t-3xl { font-family: var(--font-head); font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: var(--tr-tight); }
.t-2xl { font-family: var(--font-head); font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: var(--tr-tight); }
.t-xl  { font-family: var(--font-head); font-size: var(--fs-xl);  line-height: var(--lh-xl);  font-weight: 600; letter-spacing: var(--tr-tight); }
.t-lg  { font-family: var(--font-head); font-size: var(--fs-lg);  line-height: var(--lh-lg);  font-weight: 600; }
.t-md  { font-size: var(--fs-md); line-height: var(--lh-md); }
.t-sm  { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs  { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-3); }
.strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
/* Every amount, ID, score, count, timestamp. Tabular so columns align. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: var(--tr-mono);
}
.num-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.id-ref { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tr-mono); color: var(--ink-2); }

/* ── layout utilities ───────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.stack-1 > * + * { margin-top: var(--sp-1); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.stack-7 > * + * { margin-top: var(--sp-7); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-tight { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.divider { height: 1px; background: var(--line); border: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* tablet-lg and below */
@media (max-width: 1279px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tablet and below */
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* mobile-lg and below */
@media (max-width: 767px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ── scrollbars — thin, chrome-free ─────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* ── reduced motion — honour it everywhere ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}