/* =====================================================================
   LARCH BRAND LAYER. Locked brand: L9a "Pixel grid", night and gold (brand/final/L9a.html).
   The one file a palette or mark change touches. Everything else reads only the semantic
   tokens below, never raw hex. --mute and --faint are the AA values from the app's DESIGN-NOTES
   (2026-11-11). Gold is the mark's one dash; in text the accent is the darkened gold ink (light)
   or the dark-theme gold, so it passes AA.
   ===================================================================== */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Material Symbols Rounded"; src: url("fonts/MaterialSymbolsRounded.woff2") format("woff2"); font-weight: 100 700; font-display: block; }

:root {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* lockup: pixel-grid mark and wordmark, the L9a SVG files, copied unchanged; replace the files to update the wordmark */
  --lockup-url: url("brand/lockup-horizontal.svg");

  /* light (default) */
  --bg: #f4f5f6;          /* page canvas (brand paper) */
  --paper: #ebedef;       /* tinted sections, app window canvas */
  --page: #ffffff;        /* raised surfaces (brand surface) */
  --ink: #151b21;
  --mute: #595c5f;        /* AA on bg, paper and page */
  --faint: #696b6e;       /* AA on bg, paper and page */
  --line: #dee2e6;
  --line2: #c8ced4;
  --soft: rgba(21, 27, 33, .045);
  --sel: rgba(21, 27, 33, .06);
  --acc: #7d5a12;         /* brand accent ink: links, focus, ready checks */
  --acc-soft: #f7edd8;
  --rec: #d93c2b;         /* app recording state, inside product surfaces only */
  --rec-soft: rgba(217, 60, 43, .12);
  --warn: #9a5f05;
  --warn-soft: #f8efdd;
  --me: #151b21;          /* speaker palette: the page's only full color, used in the strip */
  --s1: #3f7c84;
  --s2: #a4532b;
  --s3: #5a5fa8;
  --btn: #172129;         /* brand primary */
  --btnink: #ffffff;
  --glow: 125, 90, 18;    /* rgb of the accent for lit edges */
  --sh-1: 0 1px 3px rgba(28, 30, 36, .08);
  --sh-pop: 0 0 0 1px var(--line), 0 18px 40px rgba(10, 12, 20, .14), 0 2px 6px rgba(10, 12, 20, .05);
  --sh-win: 0 0 0 1px rgba(20, 22, 26, .07), 0 30px 70px -10px rgba(16, 24, 32, .22), 0 4px 14px rgba(16, 24, 32, .07);
  --sh-float: 0 1px 2px rgba(16, 24, 32, .05), 0 14px 28px -10px rgba(16, 24, 32, .16), 0 48px 96px -28px rgba(16, 24, 32, .30);
  color-scheme: light;
}

/* dark, following the OS unless the visitor picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1318; --paper: #11181e; --page: #151b21; --ink: #eceff2; --mute: #b5b7ba; --faint: #95989b;
    --line: #252d35; --line2: #333d47; --soft: rgba(236, 239, 242, .05); --sel: rgba(236, 239, 242, .07);
    --acc: #e2b04a; --acc-soft: #382c12; --rec: #ff6b5a; --rec-soft: rgba(255, 107, 90, .14); --warn: #e3a83f; --warn-soft: #342a17;
    --me: #eceff2; --s1: #7cc3c9; --s2: #e39a6b; --s3: #a3a7ec; --btn: #eceff2; --btnink: #0e1318; --glow: 226, 176, 74;
    --lockup-url: url("brand/lockup-horizontal-reversed.svg");
    --sh-1: 0 1px 3px rgba(0, 0, 0, .3);
    --sh-pop: 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --sh-win: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -10px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .3);
    --sh-float: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 28px -10px rgba(0, 0, 0, .5), 0 48px 96px -28px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
/* dark, picked on the toggle */
:root[data-theme="dark"] {
  --bg: #0e1318; --paper: #11181e; --page: #151b21; --ink: #eceff2; --mute: #b5b7ba; --faint: #95989b;
    --line: #252d35; --line2: #333d47; --soft: rgba(236, 239, 242, .05); --sel: rgba(236, 239, 242, .07);
    --acc: #e2b04a; --acc-soft: #382c12; --rec: #ff6b5a; --rec-soft: rgba(255, 107, 90, .14); --warn: #e3a83f; --warn-soft: #342a17;
    --me: #eceff2; --s1: #7cc3c9; --s2: #e39a6b; --s3: #a3a7ec; --btn: #eceff2; --btnink: #0e1318; --glow: 226, 176, 74;
    --lockup-url: url("brand/lockup-horizontal-reversed.svg");
  --sh-1: 0 1px 3px rgba(0, 0, 0, .3);
  --sh-pop: 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --sh-win: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -10px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .3);
  --sh-float: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 28px -10px rgba(0, 0, 0, .5), 0 48px 96px -28px rgba(0, 0, 0, .7);
  color-scheme: dark;
}