/* Design tokens. Two layers, deliberately:
 *   1. LEGACY — slice-1 neutrals still consumed by the slice 1–5 stand-in
 *      styles. They retire as slice 7+ restyles each surface onto the
 *      foundation tokens below.
 *   2. THE FOUNDATION — the Aug 27–29 design sitting, transcribed slice 6c.
 *      design/invoice-edit.html WAS the spec (deleted Aug 31; the built page is
 *      the spec now, git has the prototype); every value below was its :root,
 *      derived as written: the 8px unit, one content width, THE line, four
 *      tints from one brand hue.
 */

/* ── the faces (licensed Aug 31: Mass-Driver Commercial, up to 5 people).
   WOFF2 only, per the foundry's own self-hosting guidance; filenames are
   family-weight, lowercase, no diacritics (macOS NFD vs Linux NFC never
   gets a vote). Family strings are ours and drop the accent too — "MD
   Lorien" — so no encoding survives anywhere in the pipeline. Exactly the
   styles the app uses: 400 everywhere, 500 for UI/IO emphasis; display is
   Lorien Regular by ruling (Aug 31 A/B). ── */
@font-face{font-family:"MD UI";src:url("/fonts/mdui-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MD UI";src:url("/fonts/mdui-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"MD IO";src:url("/fonts/mdio-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MD IO";src:url("/fonts/mdio-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"MD Lorien";src:url("/fonts/mdlorien-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* THE SIGNATURE FACE (ruled Sep 8: Hipster Script, bought) — the one script face; typing is signing, and the name renders in it on both sides of the sign block and on the certificate. */
@font-face{font-family:"Hipster Script";src:url("/fonts/hipsterscript-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ── legacy (slices 1–5 stand-ins) ── */
:root {
    --color-ink: #322d2a;
    --color-paper: #fffdf8;
    --color-accent: #fcff28;
    --color-error: #b3261e;
    --font-text: "GT Alpina", Georgia, serif;
    --font-ui: "Circular", system-ui, sans-serif;
    --space: 1rem;
}

/* ── the foundation (Aug 27–29, transcribed slice 6c) ── */
:root {
    /* Type. REFRESH layer — faces are Chris-selected, never a session's call.
       Licensed families first (the @font-face block above), the local trial as
       the bridge for machines that carry it, honest fallbacks last. Weights
       are PINNED to styles the faces actually have (A/B'd in Chrome, Aug 31):
       display = Lorien REGULAR (400 everywhere); UI/IO emphasis = MEDIUM
       (500); nothing bolder, no italics — and nothing bolder is LICENSED, so
       a future style asking for 600+ must buy the style, not synthesize. */
    --ui: "MD UI", "MD UI Trial", system-ui, sans-serif;
    --display: "MD Lorien", "MD Lorien Trial", serif;
    --mono: "MD IO", "MD IO Trial", monospace;
    /* The ONE signature face (the proposal sitting, Sep 3): theater, no
       per-document choice — typing is signing, and the name renders in it
       on both sides of the sign block. RULED Sep 8: Hipster Script (the
       @font-face above), replacing the Snell Roundhand stand-in; at 34px on
       the slot line it reads as a signature and stays legible. The old
       stand-ins stay as fallbacks while the face loads. */
    --script: "Hipster Script", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;

    /* Ink and paper. */
    --paper: #fff;
    --ink: #17171a;
    /* The grey LADDER (Aug 31, evening): ink2 and ink3 are mixes of ink into
       the panel — the darkest common ground — so their contrast is a property
       of the math: 7.8:1 and 4.9:1 on the panel, higher on the tint and the
       paper, for any brand. Fixed hexes (#5c5b57, #9a9892) retired: ink3 had
       fallen to 2.3:1. Side effect, welcome: the greys take the ground's cast. */
    --ink2: color-mix(in oklab, var(--ink) 75%, var(--panel));
    --ink3: color-mix(in oklab, var(--ink) 60%, var(--panel));
    --rule2: #cfcbc2;   /* the one soft grey the tints don't derive (checkbox border) */

    /* THE brand hue. The palette sitting changes this one variable and every
       tint follows. STAND-IN, FLAGGED: the prototype pinned the legacy
       Faculty green on Aug 29 for old-vs-new comparison — its own comment
       says "not the default". Renamed --blue → --brand per that comment. */
    --brand: #006551;
    /* The brand as it ACTS (Aug 31, Chris: "what if their brand color is
       light?"): lightness capped at 0.5 in OKLCH, hue and chroma kept — a
       brand already darker than the cap passes untouched (Faculty green sits
       at L≈.43), a pale one is pulled down to a readable member of the same
       hue. Every surface where the product acts — Publish, links, the field
       line, the off-field line, the mark's chevron — reads THIS; the ground
       tints below read the raw brand (a pale brand makes a pale ground, and
       that's honest). Relative color syntax: derived, never judged per studio. */
    --acting: oklch(from var(--brand) min(l, 0.5) c h);
    --late: #8a3b12;       /* OVERDUE — the one colour that isn't the brand's, used sparingly (prototypes/hub.html's .late); a token so no component carries the literal */
    --highlight: #fff0a3;  /* the studio's HIGHLIGHT — where you are (active nav, field focus, hover). Renamed from --yellow Aug 31: a token names a role, never a value — the studio will choose this (the palette settings vision). The three-contrast rule: ink on highlight must read. */

    /* ── framework (Aug 28): 8px unit, one app-wide content width, fluid
       outer padding only ── */
    --u: 8px;
    --content: 944px;               /* 12 × 64 + 11 × 16 — a ceiling, not a target */
    --gutter: calc(2 * var(--u));   /* 16 */
    --rowgap: calc(3 * var(--u));   /* 24 */
    --cardpad: calc(5 * var(--u));  /* 40 */
    --gx: clamp(16px, 3vw, 40px);   /* the only fluid value in the app */
    --rail-w: 184px;                /* 23u */

    /* ── field system "C": tinted ground, white fields — four tints from the
       one brand hue ── */
    --tint: color-mix(in oklab, var(--brand) 6%, white);
    --panel: color-mix(in oklab, var(--brand) 14%, white);   /* THE GROUND (ruled Aug 31, evening): the content panel sits deeper than the frame, so the white fields are windows cut into it — "makes the page feel much more obvious" (Chris). Rail + bar stay on --tint: a light L holding a deeper panel; the paper stays white, the brightest thing by design. Ceiling is the line: past ~24% the 40% line fades into the ground. */
    --rail: color-mix(in oklab, var(--brand) 10%, white);   /* SUPERSEDED Aug 31 — the rail reads --tint; kept for the styleguide's tint ladder */
    --rule: color-mix(in oklab, var(--brand) 18%, white);
    --field: color-mix(in oklab, var(--acting) 40%, white);   /* THE line: from the acting brand, so the chrome never fades with a pale palette */
    --outside: color-mix(in oklab, var(--brand) 22%, white);   /* the ground OUTSIDE the frame (past ~1300): deeper than the panel it frames (was 12%, now lighter than the panel — moved Aug 31) */
    --bg: var(--tint);
    --fh: calc(6 * var(--u));       /* 48 — every chrome rectangle and every field */
    --bar: calc(9 * var(--u));      /* 72 — the masthead's cell (ruled Sep 3): the lockup and the bar share one row; its 48 cells sit with 12 of air above and below */
    --mast: calc(var(--bar) + 2px); /* the masthead is the one sticky exception to the border rule — its line travels with it, so it is sized as its cell PLUS its line */
    --foot: calc(var(--bar) + 2px); /* the footer: a cell plus its line, the masthead's height — the frame's top and bottom bands match (prototypes/home.html, Chris, Sep 3; the kickoff's --fh + 2px is FLAGGED as the alternative — one token) */
    --line: 2px solid var(--field); /* THE line — chrome and fields are made of the same stroke */
    --content-edge: calc(var(--gx) + var(--cardpad));  /* where content begins; the bar's tabs and primary share it */

    /* ── the client hub (the sitting of Sep 2) ── */
    --side: calc(48 * var(--u));    /* the client's column: 384. Not a grid number — it isn't on the grid, the same way the rail's 184 isn't. Sized for the Payment Element (Stripe's fields want ~330 of room) and the fee disclosure beside it; the paper flexes with what's left. */
    --break: calc(4 * var(--u));    /* the vertical space that reads as a break between the column's sections — in place of a line */
}