/* ═══════════════════════════════════════════════════════════════════════
   THE TYPEFACES, SERVED FROM THIS BUILD.

   These three faces came from a third-party CDN at every page load, and
   a fourth — Inter — was named in thirteen files' font stacks and never
   fetched at all, so every page that asked for it quietly rendered in
   the system sans instead.

   They are now real files in the Asset Bank, under the SIL Open Font
   License, converted to WOFF2 (2.25 MB of TTF becomes 1.01 MB). The OFL
   requires its text to travel with the fonts: fonts/*.OFL.txt.

   This also makes the app the bank's first customer, which is the point
   of having a bank — and the pages now typeset without reaching any
   other party's server.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;
  font-display:swap;src:url("fonts/inter.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;
  font-display:swap;src:url("fonts/newsreader.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;
  font-display:swap;src:url("fonts/newsreader-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;
  font-display:swap;src:url("fonts/ibmplexsans.woff2") format("woff2")}

/* ═══════════════════════════════════════════════════════════════════════
   CRAFTLY — ONE TOKEN SYSTEM, TWO THEMES

   Why this file exists, and why it is not twelve files.

   Every studio in this app declared its own colours in its own <style>
   block, and they had already drifted: four different greens, three
   different panel greys, and a "dim" that was readable on one page and
   not on the next. A design system is not a palette, it is the promise
   that the same word means the same colour everywhere.

   So this sheet owns the colours and the studios borrow them.

   HOW THE RETHEME REACHES PAGES I DID NOT REWRITE
   The studios already speak a shared vocabulary — --bg, --ink, --dim,
   --panel, --line, --accent — declared on :root in each page's own
   style block. `html[data-theme=...]` outranks `:root` on specificity
   (attribute + type beats a lone pseudo-class), so redefining that
   vocabulary here flips pages whose internals were never touched.

   Colours written as literal hex inside a studio do NOT flip. That is
   the honest limit of this pass, and it is recorded in AUDIT.md per
   page rather than glossed over.

   CONTRAST IS MEASURED, NOT EYEBALLED
   Every text tone below clears 4.5:1 against bg, panel and chip in
   both themes. --faint is the one exception at ~3.6:1; it is for
   hairlines and rules only and must never carry text.

   PALETTE REASONING
   iCore's house identity is navy and green, not black and green. So
   the dark theme is navy-cast ink rather than the near-black every
   generated dark theme reaches for, and the accent is iCore's own
   green. Brass is the second voice, for figures and data, so the green
   stays meaningful instead of marking everything.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------- NIGHT */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --bg:        #080E18;
  --panel:     #0D1724;
  --panel2:    #122032;
  --chip:      #142338;
  --raised:    #16263C;

  /* lines */
  --line:      #1B2C42;
  --line2:     #243a55;
  --hair:      rgba(255,255,255,.065);

  /* text */
  --ink:       #E9EFF7;
  --dim:       #8A9CB2;
  --faint:     #5E7189;

  /* voices */
  --accent:    #35D28F;
  --accent-ink:#04150C;
  --accent-wash:rgba(53,210,143,.10);
  --accent-line:rgba(53,210,143,.34);
  --brass:     #D4A93C;
  --brass-wash:rgba(212,169,60,.10);

  /* states */
  --ok:        #35D28F;
  --warn:      #E0A94B;
  --bad:       #E8695F;

  /* depth — cinematic lighting, not drop shadows */
  --lift-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.7);
  --lift-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -24px rgba(0,0,0,.85);
  --glow:   0 0 0 1px var(--accent-line), 0 12px 40px -16px rgba(53,210,143,.35);

  /* the cool gradient the brief asks for — one, used once */
  --sheen: radial-gradient(120% 90% at 78% -10%, rgba(53,210,143,.10), transparent 58%),
           radial-gradient(90% 70% at 8% 0%,   rgba(90,130,190,.12), transparent 60%);

  /* legacy names still live in the studios */
  --card: var(--panel);
  --acc: var(--accent);
  --brand: var(--accent);
  --paper: var(--bg);
  --fg: var(--ink);
  --mute: var(--dim);
  --no: var(--faint);
  --soft: var(--panel2);
  --wash: var(--accent-wash);
  --fail: var(--bad);
  --navy: var(--bg);
  --field: var(--chip);
  --on-accent: var(--accent-ink);
}

/* ------------------------------------------------------------------ DAY */
/* The first light theme put a warm beige ground (#F6F4F0) behind white
   cards. Those two are 3% apart in luminance, so the cards had no edge
   to sit on and every screen read as one flat sheet of paper with text
   on it. Shadows were tuned so low they did nothing to rescue it.

   A light theme does not mean a pale one. The ground is now a cool
   navy-tinted grey, clearly darker than the cards, so white panels
   lift off it the way they do in the dark theme — the surfaces are
   inverted, the STRUCTURE is the same. Borders and shadows carry real
   weight for the same reason.

   Cool, not warm: the identity is navy and green. A beige ground
   fights both and ages the interface. */
html[data-theme="light"] {
  color-scheme: light;

  /* surfaces — the ground is the DARKEST here, inverting the night ramp */
  --bg:        #E9EDF2;
  --panel:     #FFFFFF;
  --panel2:    #F5F8FB;
  --chip:      #E3E9F0;
  --raised:    #FFFFFF;

  /* lines, heavy enough to actually draw a box */
  --line:      #D7DFE9;
  --line2:     #BAC7D6;
  --hair:      rgba(11,23,38,.09);

  --ink:       #0B1726;
  --dim:       #526377;
  --faint:     #7D8CA0;

  --accent:    #0B7A52;
  --accent-ink:#FFFFFF;
  --accent-wash:rgba(11,122,82,.085);
  --accent-line:rgba(11,122,82,.30);
  --brass:     #8A6508;
  --brass-wash:rgba(138,101,8,.09);

  --ok:        #0B7A52;
  --warn:      #8A5B0E;
  --bad:       #B4332A;

  /* Depth you can see. The old values were set so faint that a card and
     the page behind it were indistinguishable at arm's length. */
  --lift-1: 0 1px 2px rgba(11,23,38,.06), 0 4px 12px -4px rgba(11,23,38,.10);
  --lift-2: 0 2px 6px rgba(11,23,38,.07), 0 18px 40px -18px rgba(11,23,38,.20);
  --glow:   0 0 0 1px var(--accent-line), 0 10px 28px -12px rgba(11,122,82,.30);

  --sheen: radial-gradient(120% 90% at 78% -10%, rgba(11,122,82,.07), transparent 60%),
           radial-gradient(90% 70% at 8% 0%,   rgba(40,80,140,.07), transparent 62%);

  /* INVERTED SURFACES
     Some elements are meant to be dark in BOTH themes — a video stage,
     a code well, a preview of a dark design. Those use these, so the
     sweep can tell a deliberate dark surface apart from one that simply
     failed to flip. */
  --stage:     #0C1826;
  --stage-ink: #EDF2F8;
  --stage-dim: #93A5BA;
  --stage-line:#20344B;
}

/* The night theme's own stage tokens, so a page can use them unconditionally. */
:root, html[data-theme="dark"] {
  --stage:     #0A1220;
  --stage-ink: #E9EFF7;
  --stage-dim: #8A9CB2;
  --stage-line:#1B2C42;
}

/* ------------------------------------------------------- SHAPE AND TYPE
   Radius is graded, not one value on everything: the page's own
   containers are soft, controls are tighter, chips are pills. A single
   border-radius applied to every box is the thing that makes an
   interface look stamped out.                                         */
:root {
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ui: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;

  /* a modular scale, 1.26, rounded to whole pixels */
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15.5px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 27px;
  --t-2xl: 34px;
  --t-3xl: 43px;

  --sp: 8px;
  --gut: clamp(18px, 4vw, 44px);
  --measure: 66ch;

  --ease: cubic-bezier(.22,.61,.36,1);
  --quick: 140ms var(--ease);
}

/* --------------------------------------------------------------- GROUND */
html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Figures line up in columns. Tables of numbers that jitter between
   rows are harder to read than they look.                            */
table, .num, [data-num] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- A11Y FLOOR
   Focus is visible on every theme, and motion is a request not a
   requirement.                                                        */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Scrollbars, so a light theme does not keep a dark gutter. */
* { scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }