/* Fettler brand foundation.
   SOURCE OF TRUTH: fettler/dashboard @9f9b3ad: web/src/brand.css (tokens), web/src/index.css (canvas),
   web/src/shell/Logo.tsx (marks), web/public/favicon.svg, web/public/fonts/InterVariable.woff2.
   This file mirrors those values for a static site; if they ever differ, the dashboard wins.
   Every variation imports this first and builds its own look on top. Read-only for builders. */

/* Inter, Latin subset (106 KB instead of 352 KB): built from the dashboard's InterVariable.woff2 with
   fontTools pyftsubset, keeping both axes (opsz, wght) and every layout feature (cv11, ss01 included).
   It covers Basic Latin, Latin-1, general punctuation, arrows and geometric shapes; nothing else is loaded,
   and anything outside the range falls back to the system face. Rebuild: see revamp/README.md. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette. Contrast (WCAG):
     alpaca on pine 14.6 · greyboy on pine 9.8 · yeller on pine 6.3 · yeller on mossy 4.3 (large text only)
     pine on yeller 6.3 · lichen on alpaca 6.2 · mossy on greyboy 6.6
     FAILS for text: lichen on pine 2.4 · alpaca on yeller 2.3 · yeller on alpaca 2.3 (fills and marks only). */
  --pine: #102622;       /* Lone Pine: the ground, the logo on light */
  --greenlike: #16302b;  /* raised surfaces on the dark ground */
  --mossy: #20443e;      /* panels; primary on light */
  --lichen: #3a635c;     /* secondary lines, muted marks (never text on dark) */
  --yeller: #c89b6d;     /* the one accent: the dot, the approval, the human moment */
  --greyboy: #cccbc5;    /* rules and quiet text on dark; borders on light */
  --alpaca: #f5f5f3;     /* type on dark; the light ground */

  /* The dashboard's paper system (brand.css / index.css), for light grounds. */
  --canvas: #eeede8;          /* warm canvas behind paper panels (index.css --canvas 238 237 232) */
  --paper: #fafaf8;           /* off-white panels (background-primary 250 250 248) */
  --paper-hover: #f5f5f3;
  --paper-2: #f2f2ef;         /* secondary surface (242 242 239) */
  --rule: #deddd7;            /* border-primary (222 221 215) */
  --rule-2: #cccbc5;          /* border-secondary = Greyboy */
  --divider: #e8e7e2;         /* divider-primary (232 231 226) */
  --select: #dfe7e4;          /* selection, a Lichen tint (223 231 228) */
  --select-hover: #d2ded9;
  --ink: #102622;             /* text on light = Lone Pine */
  --ink-2: #3a544e;           /* content-secondary (58 84 78) */
  --ink-3: #7a8883;           /* content-tertiary (122 136 131), large text / meta only */
  --ink-4: #a4ada9;           /* content-quaternary (164 173 169), disabled */
  --primary: #20443e;         /* primary actions in Mossy */
  --primary-hover: #102622;   /* pressed / hover in Lone Pine */
  --focus-light: #3a635c;     /* focus rings on light: Lichen (dashboard) */
  --focus-dark: #c89b6d;      /* focus rings on dark: Yeller (Lichen is 2.4:1 on pine, below the 3:1 focus minimum) */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion, shared names. Ports of the brand film's eases (fx.tsx / motion.ts). */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Inter's tight tracking from the brand sheet; cv11 = single-storey a, ss01 = open digits (dashboard brand.css) */
body { margin: 0; font-family: var(--font); letter-spacing: -0.006em; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
.tnum, table, input { font-variant-numeric: tabular-nums; }
/* no third typeface: code/kbd would otherwise fall back to the browser's monospace (dashboard rule) */
code, kbd, pre, samp { font-family: inherit; }

/* Accessibility primitives every variation needs */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 16px; background: var(--yeller); color: var(--pine); font-weight: 600; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--focus, var(--focus-light)); outline-offset: 3px; }
/* a variation sets --focus: var(--focus-dark) on any dark region */

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