/* Brand layer — the only file that owns the accent colour.
 *
 * design/README.md §2 шаг 1, design/DESIGN-BRIEF.md §5.
 *
 * ui-kit/ is a vendor copy and is never edited: this file only *overrides*
 * its variables (--sc-accent, --sc-accent-rgb, --sc-glow, --sc-glow-rgb,
 * --sc-app) and the app-level names styles.css reads.
 *
 * ONE variable sets everything: --brand. Presets are one line each; the
 * derived inks AND the surfaces are computed with color-mix(in oklab, …) so
 * a new preset needs no second colour and no build step. The chrome is a
 * tint of the accent, not a fixed warm white: pick Teal and the header, both
 * panels, the strip above the sheet, the statusbar and the sheet's paper all
 * turn cool. Only the shapes keep the exported colours.
 *
 * There is one appearance: light. The kit's HUD skins and dark mode are not
 * reachable — index.html pins data-sc="mac", data-race="light".
 *
 * Why --brand-rgb exists. The kit consumes accents as channel triplets
 * (`rgb(var(--sc-accent-rgb) / .14)`). CSS cannot slice a colour into
 * channels without relative-colour syntax (`rgb(from …)`, not in every
 * browser we must run in), so each preset carries its channels next to the
 * hex. It is a mirror of --brand, not a second decision: change both or
 * neither. Everything else is derived.
 *
 * Contrast (WCAG 2.1, sRGB):
 *   --brand-ink is 80 % brand in oklab: #ba4300 for Flame, 5.40 on paper /
 *   5.06 on the panel / 4.72 on the desk — the tightest case in the system is
 *   4.72, above the 4.5 threshold (DESIGN-BRIEF §5.3). The raw --brand is
 *   ~3:1 on the panel, so it NEVER paints small text: focus rings, small text
 *   and icon strokes take --brand-ink; --brand stays a fill (selected tint,
 *   dot, selected stroke on the sheet).
 *
 * Field borders are driftwood #8e8b87 (3.05–3.39), not bone #c0bbb6 (1.67–1.90):
 * bone fails WCAG 1.4.11 for a control boundary (README §3.5).
 */

/* Inter (SIL OFL 1.1, app/src/brand/fonts/OFL.txt). Vendored, not linked:
 * the app must open with the network unplugged, and every width in
 * design/density-spec.md §4 is computed from these metrics (UPM 2048,
 * x-height .5459, cap .7275). The kit's own fonts are latin-only — 0 of 66
 * Cyrillic glyphs — which is why the UI used to render Russian in the system
 * font while Latin came from Exo 2 (DESIGN-BRIEF §7.2). Three subsets cover
 * ASCII + Cyrillic; 93 KB total. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

:root {
  /* ---- presets: the single switch ------------------------------------ */
  --brand: #fa5d00;
  --brand-rgb: 250 93 0;

  /* ---- surfaces: a tint of the accent, not a fixed warm white ---------
   * Switching the preset must repaint the window, not only the selection.
   * Every chrome surface is the accent mixed into white, so Flame is peach,
   * Teal is cool, Violet is lilac — header, both panels, the strip above the
   * sheet, the statusbar and the sheet's own background all follow --brand.
   * The shapes on the sheet stay pure white (--sheet, styles.css): they are
   * the diagram and must match the SVG export. Percentages are low enough
   * that --ink-soft still clears 4.5:1 on the darkest of them. */
  --surface-paper: #ffffff;                                      /* fields, cards, menus */
  --surface-sunken: color-mix(in oklab, var(--brand) 5%, #fff);  /* inputs */
  --surface-panel: color-mix(in oklab, var(--brand) 10%, #fff);  /* header, panels, bars */
  --surface-desk: color-mix(in oklab, var(--brand) 8%, #fff);    /* around the shapes */

  /* ---- ink (all ≥ 4.5:1 on every surface above) ---------------------- */
  --ink: #1d1e1c;             /* 13.9–15.1 */
  --ink-soft: #5c5a57;        /* 5.7–6.3 */
  --ink-faint: #6b6864;       /* 4.6–5.3 — still passes AA for 11 px */

  /* ---- boundaries ---------------------------------------------------- */
  --border-control: #8e8b87;        /* 3.05–3.39 ≥ 3:1 (WCAG 1.4.11) */
  --border-control-hover: #777571;  /* 4.02–4.60 */
  --line: color-mix(in oklab, var(--brand) 14%, #e6e0d9);   /* structural hairline */
  --line-soft: color-mix(in oklab, var(--brand) 8%, #efe9e2); /* inside a pane */
}

[data-brand="moss"]     { --brand: #4f6b21; --brand-rgb: 79 107 33; }
[data-brand="teal"]     { --brand: #0e7490; --brand-rgb: 14 116 144; }
[data-brand="violet"]   { --brand: #6b3fd4; --brand-rgb: 107 63 212; }
[data-brand="plum"]     { --brand: #9a1f6e; --brand-rgb: 154 31 110; }
[data-brand="graphite"] { --brand: #3f3f42; --brand-rgb: 63 63 66; }

/* ---- derived: nothing below is ever set by hand ---------------------- */
/* The mix percentages are not the brief's 78 / 62. Those two were solved to
 * reproduce #ba4500 / #9b3a00 when the mix happens channel-wise in sRGB; in
 * oklab the same percentages land darker (#b44000, 5.72 on paper), which is
 * outside the ±0.15 tolerance README §2 asks for. 80 % gives #ba4300 — the
 * text-safe accent. Measured on the tinted surfaces of all six presets, the
 * tightest case is Flame: 4.86 on the panel, 4.96 on the desk (Teal 7.4,
 * Graphite 11.6). 70 % gives #9b3700 with white at 7.14. */
:root {
  --brand-ink:    color-mix(in oklab, var(--brand) 80%, #000);
  --brand-strong: color-mix(in oklab, var(--brand) 70%, #000);
  /* Soft is mixed into the panel, not into white: the panel itself is a tint
   * of the accent now, so a 12 % wash on paper would vanish on it. */
  --brand-soft:   color-mix(in oklab, var(--brand) 20%, var(--surface-panel));
  --brand-hover:  color-mix(in oklab, var(--brand) 92%, #000);
}

/* ---- bridge to the kit ----------------------------------------------- */
/* Loaded after ui-kit/adapters/uml.css; same specificity, later wins. */
html[data-sc] {
  --sc-accent: var(--brand);
  --sc-accent-rgb: var(--brand-rgb);
  --sc-glow: var(--brand);
  --sc-glow-rgb: var(--brand-rgb);
}
html[data-app="uml"] {
  --sc-app: var(--brand);
  --sc-app-rgb: var(--brand-rgb);
}

/* ---- bridge to the app ----------------------------------------------- */
/* Overrides ui-kit/adapters/uml.css, which maps these to the kit's neutral
 * light skin. There is exactly ONE appearance: the light warm-paper editor.
 * The kit's HUD skins (steel/crystal/chitin) and the macOS dark mode are not
 * offered — index.html pins data-sc="mac" and data-race="light" before the
 * first paint, so a preference stored by an older build cannot bring them
 * back. The rules below therefore name the light state only. */
:root,
html[data-race="light"] {
  --bg: var(--surface-desk);
  --panel: var(--surface-panel);
  --panel-2: var(--surface-paper);
  --ctl: var(--surface-sunken);
  /* Hairlines must be declared here, not only in :root: ui-kit's
   * `html[data-sc]` (0,1,1) sets them from its own neutral palette and would
   * otherwise beat the `:root` (0,1,0) declaration. */
  --line: color-mix(in oklab, var(--brand) 14%, #e6e0d9);
  --line-soft: color-mix(in oklab, var(--brand) 8%, #efe9e2);
  --ink: #1d1e1c;               /* 14.6–16.7 on every surface */
  --ink-soft: #5c5a57;
  --ink-faint: #6b6864;
  --accent: var(--brand-ink);          /* text + focus rings: 5.00 on panel */
  --accent-fill: var(--brand);         /* fills only: selected tint, dot */
  --accent-soft: var(--brand-soft);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ui-kit/css/base.css sets `html[data-sc] body` (0,1,2) — a dark vignette,
 * Exo 2 at 14/1.5, letter-spacing .01em. The editor's own type scale must win,
 * so the override is written at the same specificity, from the later file. */
html[data-sc][data-race="light"] {
  color-scheme: light;
}
html[data-sc][data-race="light"] body {
  color: var(--ink);
  background: var(--panel);
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  letter-spacing: 0;
}