/* Kit v5 · tokens · "Liquid glass over the district's photo"
   Rules: the photo carries the color. UI is monochrome (white, ink, glass).
   Color appears only in imagery and in charts. Light materials, so it reads as light mode.
   Lineage: App Kit v1 (district photo opens every page, chips, status line),
   Kit v4 (exact truth labels, DERIVED arithmetic), v5 (HomeView numerals, glass, finishes). */


:root{
  color-scheme:light;

  /* monochrome ink */
  --k-ink:#111316;                 /* text on frost */
  --k-ink-2:rgba(17,19,22,.66);
  --k-ink-3:rgba(17,19,22,.45);
  --k-line:rgba(17,19,22,.09);
  --k-white:#ffffff;               /* text on clear glass / photo */
  --k-white-2:rgba(255,255,255,.78);
  --k-white-3:rgba(255,255,255,.58);

  /* materials: two glasses, both light */
  --k-clear:rgba(255,255,255,.16);         /* thin glass, white text, photo shows through */
  --k-clear-hi:rgba(255,255,255,.28);      /* hover / pressed */
  --k-clear-edge:rgba(255,255,255,.34);
  --k-frost:rgba(255,255,255,.58);         /* reading glass, ink text (Apple/Opal: thin, bright edge, almost no shadow) */
  --k-frost-solid:rgba(250,250,252,.95);   /* fallback + print */
  --k-frost-edge:rgba(255,255,255,.6);
  /* cards (charts, insights, KPIs): milky at rest so the photo stays quiet behind the figures, clearing toward
     white with a small lift on hover (the district fiscal explorer pattern, 2026-10-14) */
  --k-frost-rest:rgba(255,255,255,.9);
  --k-frost-hover:rgba(255,255,255,.97);
  --k-frost-hover-edge:rgba(255,255,255,.95);
  --k-glass-shadow-hover:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.05),0 24px 48px -24px rgba(0,0,0,.32);
  --k-row:rgba(255,255,255,.5);            /* grouped row inside a panel (Opal settings rows) */
  --k-row-edge:rgba(255,255,255,.75);
  --k-blur:blur(34px) saturate(1.9);
  --k-blur-thin:blur(20px) saturate(1.7);
  --k-glass-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.04),0 18px 40px -22px rgba(0,0,0,.28);

  /* the one UI gradient: Opal "Hold to Commit" aurora, reserved for the commit action */
  /* light version: an opaque pearl pill with the aurora glowing up from its lower edge */
  --k-commit:radial-gradient(70% 120% at 15% 135%,rgba(120,220,150,.85),transparent 62%),
             radial-gradient(70% 130% at 52% 145%,rgba(110,190,255,.85),transparent 62%),
             radial-gradient(60% 120% at 90% 135%,rgba(255,214,110,.85),transparent 62%),
             linear-gradient(180deg,#ffffff,#f3f4f6);
  --k-commit-ink:#111316;
  --k-commit-edge:rgba(17,19,22,.1);

  /* wordmark: matches the house navbar */
  --k-f-wordmark:'Montserrat',system-ui,sans-serif;
  --k-scrim:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 35%,rgba(0,0,0,.32));

  /* charts are the only place UI color lives. Palette "mineral" (charts/kit-charts.js PALETTES has the presets).
     The ordered cycle: series take these in turn, and cardGrid starts each card on its own hue (skipping 2, which is
     kept for emphasis). Every hue holds 3:1 or better as a mark on frost glass; text stays ink. */
  --k-chart-1:#0d8086;   /* aquifer: mineral water, leads */
  --k-chart-2:#2e5f9e;   /* azurite blue, kept for the one emphasis */
  --k-chart-3:#4f7a3c;   /* moss */
  --k-chart-4:#7a4fb0;   /* amethyst */
  --k-chart-5:#1d2a3a;   /* cavern ink */
  --k-chart-6:#9c7726;   /* limestone ochre */
  --k-chart-7:#bd5a26;   /* copper, late in the cycle so warm hues stay rare */
  --k-chart-8:#6e6a62;   /* limestone grey */
  /* roles: one emphasis per chart, the plan in cavern-ink dashes, context in a pale aquifer tint */
  --k-chart-emphasis:#2e5f9e;            /* the scenario, the one flagged row or point: azurite */
  --k-chart-emphasis-ink:#2e5f9e;        /* emphasis as text (end labels); 5.9:1 on frost */
  --k-chart-exception:var(--k-chart-emphasis);
  --k-chart-plan:#1d2a3a;                /* adopted, plan, budget, goal level: cavern ink, dashed */
  --k-chart-goal:var(--k-chart-plan);
  --k-chart-context:#b4d8d6;             /* faint aquifer lines beside the one that matters */
  --k-chart-good:#3d6b30;                /* deep moss */
  --k-chart-bad:#a8432f;                 /* rust */
  --k-chart-muted:rgba(17,19,22,.45);
  --k-chart-grid:rgba(17,19,22,.08);
  --k-chart-track:rgba(17,19,22,.07);
  --k-chart-figure:#1d2a3a;              /* a neutral figure readout: cavern ink */
  --k-chart-seq-lo:#e4eeec;              /* sequential ramp (heatmap, treemap, activity): limestone mist to deep aquifer */
  --k-chart-seq-hi:#0f4a50;
  --k-f-figure:'Montserrat',var(--k-f-ui,system-ui),sans-serif;   /* figures and readouts, 600 to 700 */

  /* type: five working sizes + display + numeral */
  --k-f-ui:'Figtree',-apple-system,'SF Pro Text',system-ui,sans-serif;
  --k-f-turn:'Libre Baskerville',Georgia,serif;
  --k-f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --k-t-kicker:12px; --k-t-meta:13px; --k-t-label:14px; --k-t-secondary:15px; --k-t-body:16px;
  --k-t-display:clamp(28px,3.6vw,40px);
  --k-t-numeral:clamp(84px,13vw,168px);   /* one per view, weight 200 */

  /* shape */
  --k-r-pill:999px; --k-r-panel:28px; --k-r-tile:22px; --k-r-inner:16px;

  /* motion: one system (INTERACTION-STANDARD.md section 1). Every CSS transition uses --k-ease; no other curve,
     and no overshoot curves in CSS. The one spring is in script (stiffness 170, damping 22). */
  --k-ease:cubic-bezier(0.23,1,0.32,1);
  --k-enter:140ms;    /* hover in, press, readout in, chip fill */
  --k-exit:280ms;     /* hover out, readout out, close */
  --k-move:360ms;     /* something changes place or size: sheets, tabs, marks moving to new values */
  --k-scene:900ms;    /* once per view at most: a bar family growing in, a photo crossfade */
  --k-stagger:40ms;   /* between items, never more than 8 items */
  /* DEPRECATED aliases, kept so older pages (the suite, the Executive gold) keep working. Use the names above.
     --k-spring was cubic-bezier(.2,.9,.25,1.15), an overshoot; it now resolves to --k-ease.
     --k-dur was .42s; it now resolves to --k-move. */
  --k-spring:var(--k-ease);
  --k-dur:var(--k-move);

  /* focus and muted text: solid colours, measured. --k-focus is the 2px ring on frost and paper (navy from the
     ink family, 10.3:1 on frost #f4f5f7, 11.3:1 on white); on a dark photo use white instead. --k-ink-muted is
     quiet text as a solid colour, not an alpha (6.0:1 on frost, 4.5:1 or better on the light photo tones). */
  --k-focus:#1f3a68;
  --k-ink-muted:#5a5d63;
}