/* ──────────────────────────────────────────────────────────────
   Foundation tokens — Atrium "Mono Serious" skin (Ocean palette).

   A quiet, near-monochrome system for serious money. The neutral
   ramp is now one blue-cool "Ocean" family (mirrored between dark
   and light), colour is rationed to one mint (primary) and one
   honey/gold (attention), and the type system is a single grotesk
   in three weights. Components still never read these directly —
   they read the semantic layer.
   ────────────────────────────────────────────────────────────── */
:root {
  /* ─── Ocean ramp — one blue-cool neutral family ──────────────
     Mirrored dark↔light: grey-950 is the dark page ground, grey-0
     the light surface. Tinted cool so the whole substrate reads
     "Ocean" even where a stray consumer reaches for --grey-N. */
  --grey-0:   #ffffff;
  --grey-50:  #f4f7fa;
  --grey-100: #edf1f6;
  --grey-150: #e9eef4;
  --grey-200: #dce4eb;
  --grey-300: #d2dce4;
  --grey-400: #b4c3d0;
  --grey-500: #8a9dac;
  --grey-600: #5c6f7e;
  --grey-700: #36454f;
  --grey-800: #2c3a46;
  --grey-900: #202c37;
  --grey-950: #18222c;

  /* ─── Accent — Mono Serious mint ─────────────────────────────
     The single primary accent: brand mark, primary actions, money
     in, savings. Dark ink sits on it (never white) so the bright
     mint reads as a deliberate, legible affordance in both modes.
     Whitelabel tenants override in tokens.brand.css. */
  --accent:        #3ed598;
  --accent-text:   #0d1512;
  --accent-hover:  #2fae7c;   /* ≈ accent − 14% L */

  /* ─── Spacing — 4px base (unchanged) ─────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* ─── Radii — tight corners (Mono Serious) ───────────────────
     Base card radius is 5px; buttons/inputs and chips/avatars are
     derived from it (0.6r+2 ≈ 5, 0.55r+2 ≈ 5). Corners are tight
     and consistent — nothing rounds toward "bubbly". */
  --r-0:    0px;
  --r-xs:   3px;     /* micro swatches: legend chips, category dots */
  --r-1:    4px;     /* chips, small inlays */
  --r-2:    5px;     /* buttons, inputs, icon tiles */
  --r-3:    5px;     /* cards + modals */
  --r-4:    6px;     /* large surfaces (net-worth summary) */
  --r-5:    8px;     /* record cards, 30px icon tiles */
  --r-6:   10px;     /* 38px icon tiles, category rows */
  --r-pill: 999px;

  /* --r-2 and --r-3 hold the same 5px today but stay separate tokens:
     they are the button rung and the card rung, and tokens.brand.css
     already shows a tenant re-pinning --r-3 alone to sharpen cards.
     Collapsing them would remove that hook. Map by role, not value. */

  /* ─── Typography ─────────────────────────────────────────────
     One family — Instrument Sans — in three weights (400/500/600).
     Numerals are always tabular so money columns align like a
     ledger. Mono kept only as a fallback for legacy figure spots.

     "Instrument Sans Variable" leads both stacks: that is the family
     name the self-hosted variable font declares (see src/index.css).
     Plain "Instrument Sans" is kept behind it so a machine with the
     static family installed locally still uses the real typeface. */
  --font-sans:
    "Instrument Sans Variable", "Instrument Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display:
    "Instrument Sans Variable", "Instrument Sans", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Type scale — Mono Serious ladder: KPI display down to overline.
     Smaller and tighter than Clarity; hierarchy comes from size and
     spacing, not weight (nothing heavier than 600). */
  --t-display: 28px;   /* KPI figures */
  --t-h1:      23px;   /* page titles */
  --t-h2:      16px;   /* card headings */
  --t-h3:      14px;
  --t-body:    13px;   /* rows, labels */
  --t-small:   12.5px; /* supporting lines */
  --t-meta:    12px;
  --t-eyebrow: 11px;   /* uppercase overline */

  /* Rungs above --t-h2 that the app was already using as literals: a
     lead/subhead step, a large title step, and the two hero figures on
     the home dashboard. */
  --t-lead:     18px;  /* tile names, stat figures, section leads */
  --t-title-sm: 20px;  /* the dashboard greeting */
  --t-title-lg: 24px;  /* fit-mode page titles, big answer figures */
  --t-headline: 26px;  /* the mono headline on the dashboard */
  --t-hero:     40px;  /* the headline answer figure */
  --t-hero-lg:  52px;  /* the net-worth figure — the biggest number we set */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  /* Tight tracking runs as its own ladder, the way --tk-caps-* does, so
     an off-ladder size (15.5px titles, 14.5px figures) can take negative
     tracking without borrowing a heading token it has no relation to.
     The semantic heading tokens below alias into it. */
  --tk-none:    0;
  --tk-tight-1: -0.005em;
  --tk-tight-2: -0.01em;
  --tk-tight-3: -0.02em;
  --tk-tight-4: -0.03em;
  --tk-tight-5: -0.04em;   /* the wordmark — a brand mark, not a heading */

  /* Slight positive tracking below the uppercase caps ladder, for
     lowercase mono labels and tabular figures. */
  --tk-wide-1:   0.01em;
  --tk-wide-2:   0.02em;

  --tk-display: var(--tk-tight-2);   /* −1% tracking on the big steps */
  --tk-h1:      var(--tk-tight-2);
  --tk-h2:      var(--tk-tight-1);
  --tk-eyebrow:  0.05em;   /* +5% on the uppercase overline */

  /* ─── Icon sizes (unchanged) ─────────────────────────────── */
  --i-xs: 14px; --i-sm: 16px; --i-md: 20px; --i-lg: 24px; --i-xl: 32px;

  /* ─── Motion (unchanged) ─────────────────────────────────── */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  /* Same family, longer tail — the settle used when something *moves* to a
     new place rather than just changing state (the cash-flow Sankey's
     ribbon morph and node re-lay). */
  --ease-flow: cubic-bezier(.22, 1, .36, 1);
  /* Motion runs as a numbered ladder with semantic aliases on top, the
     same shape as the tracking scales. The durations below are the ones
     the app was already animating at; 160ms folded onto 150 and 260ms
     onto 240, both changes well under the ~100ms just-noticeable
     threshold for a transition.

     tailwind.config.js points its transitionDuration at these tokens so
     the two systems cannot drift apart again. */
  --dur-1:   60ms;   /* stagger delays, hairline state flips */
  --dur-2:   80ms;
  --dur-3:  120ms;
  --dur-4:  150ms;
  --dur-5:  240ms;
  --dur-6:  320ms;

  --dur-fast: var(--dur-2);
  --dur:      var(--dur-4);
  --dur-slow: var(--dur-6);

  /* ─── Dense type ladder — the data-terminal surfaces ──────────
     The toolshell, cash-flow and records views run a second, tighter
     ladder below --t-eyebrow: ledger rows, axis ticks, chip labels and
     column heads that have to pack without shouting. Recorded here
     because they were already in use as raw literals throughout those
     files — the values are unchanged, they just have names now.
     Reach for the main --t-* scale first; this ladder is only for the
     data-dense surfaces it was named for. */
  --t-dense-1: 15px;
  --t-dense-2: 13.5px;
  --t-dense-3: 11.5px;
  --t-dense-4: 10.5px;
  --t-dense-5: 10px;
  --t-dense-6: 9px;
  --t-dense-7: 8px;    /* compact-mode calendar cards only */

  /* ─── Weight ─────────────────────────────────────────────────
     Three weights only — nothing heavier than 600, per the type note
     above. Hierarchy comes from size and spacing, not weight. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ─── Caps tracking ──────────────────────────────────────────
     Uppercase labels need more tracking the smaller they get, so this
     runs as a ladder alongside the dense type steps rather than as one
     value. --tk-eyebrow (0.05em) above stays the default for the
     standard 11px overline. */
  --tk-caps-1: .03em;
  --tk-caps-2: .04em;
  --tk-caps-3: .06em;
  --tk-caps-4: .08em;
  --tk-caps-5: .1em;
  --tk-caps-6: .12em;
  --tk-caps-7: .14em;
  --tk-caps-8: .16em;

  /* ─── Stacking order ─────────────────────────────────────────
     The app's layer ladder, named so a new floating surface picks a
     rung instead of inventing a number. Every value here is one that
     was already in use — nothing was re-ordered. */
  --z-behind:  -1;   /* decorative ::before painted behind content */
  --z-raised:   1;   /* sticky table head inside its own scroll box */
  --z-raised-2: 2;   /* sticky ledger footer, stage pane */
  --z-handle:   5;   /* reveal handle on the stage seam */
  --z-docked:  20;   /* docked ledger chrome */
  --z-header:  30;   /* the sticky page header */
  --z-pop:     40;   /* dropdowns, popover menus, demo banner */
  --z-rail:    45;   /* nav rail, and the mobile scrim under the drawer */
  --z-modal:   50;   /* modals, the mobile nav drawer */
  --z-portal:  60;   /* body-portalled popovers (the category picker) */
  --z-toast:  100;   /* toasts — always on top */

  /* ─── Pinned inks — deliberately NOT theme-aware ─────────────
     Ink that sits ON a coloured fill stays dark in BOTH themes: light
     text on mid-gold is illegible whichever ground the cell sits on
     (see the heat-ramp note in tokens.semantic.css). Reaching for
     --text-1 here would flip these to near-white in dark theme and
     make the calendar unreadable — which is exactly why they are
     pinned rather than semantic. */
  --ink-fixed:          #16222c;   /* glyph on a gold tile */
  --ink-on-gold:        #4a3d18;   /* heat cell — day number */
  --ink-on-gold-strong: #1d1608;   /* heat cell — amount */
  /* Soft white ink on a coloured fill: pressed-chip counts and chart
     labels printed on a dark/saturated band. Solid white is --grey-0.
     This used to be two tokens — --ink-on-fill-soft (.8) and
     --chart-ink-on-dark (.85) — inherited from two components that had
     no reason to differ: PensionCharts drew adjacent labels at both
     values. Unified on .85 in #315, the more legible of the two. */
  --ink-on-fill-soft:   rgba(255, 255, 255, .85);
  --rule-on-fill:       rgba(255, 255, 255, .5);  /* inset ring on a colour dot */
  --rule-on-dot:        rgba(0, 0, 0, .08);       /* inset ring on a pale dot */
  --hatch-on-fill:      rgba(255, 255, 255, 0.28); /* 45° hatch over a fill */

  /* ─── Chart hover tooltip ────────────────────────────────────
     A floating overlay above the plot, so it takes the one lift the
     system allows (see --shadow-pop in tokens.semantic.css). Pinned to
     a dark green-black so it reads the same in both themes. Inline
     chrome never gets a shadow: the toolshell stage seam used to, and
     that read as a grey band down the console in light theme while
     being invisible in dark — it's a hairline in both now. */
  --shadow-chart-tip:   rgba(16, 32, 30, .16);

  /* ─── Layout dimensions ──────────────────────────────────────
     Global chrome sizes only. Component dimensions (--btn-h, --rail-slim
     / --rail-wide) deliberately stay declared on their own component as
     a local API that variants re-point — see .btn-sm / .btn-lg in
     base.css. That is the intended pattern, not a token leak. */
  --topbar-h: 56px;
}