/* ============================================================
   Ode with Anthropic — brand tokens, vendored for this app.

   A copy of the ode-brand skill's assets/tokens.css. Only the
   @font-face URLs differ: they point at /static/brand/fonts/ so the
   server can serve them. Everything else is verbatim, deliberately —
   the Ode Brand Hub is the authority, and a value edited here would be
   a fork of the palette rather than a use of it. If a token is wrong,
   fix it in the brand skill and re-copy; if one is missing, add it
   there first.

   Vendored the same way static/vendor/ holds its JS: the trainer must
   work without reaching a CDN mid-interview, and a licensed font is not
   something to hotlink.

   Two of the three brand faces are here. ABC Diatype (body + display)
   and ABC Diatype Semi Mono (labels, figures, code) are both used.
   Styrene A, the secondary face, is NOT vendored because nothing in
   this UI calls for it — `--font-secondary` is kept below so the
   palette stays whole, but anything that uses it must vendor
   StyreneA-Medium-Web.woff2 first or it will quietly fall back to
   Helvetica Neue.
   ============================================================ */

@font-face {
  font-family: 'ABC Diatype';
  src: url('fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype Mono';
  src: url('fonts/ABCDiatypeSemiMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Foundation -------------------------------------------------- */
  --bistre: #201D1C;              /* foundation dark / primary text   */
  --bistre-90: rgba(32, 29, 28, 0.92);
  --bistre-80: rgba(32, 29, 28, 0.82);
  --bistre-70: rgba(32, 29, 28, 0.70);
  --bistre-55: rgba(32, 29, 28, 0.55);
  --bistre-40: rgba(32, 29, 28, 0.40);
  --bistre-20: rgba(32, 29, 28, 0.20);
  --bistre-10: rgba(32, 29, 28, 0.10);
  --bistre-06: rgba(32, 29, 28, 0.06);

  --bone: #FBFBF8;               /* foundation light                 */
  --bone-warm: #F4F3EE;          /* slightly dimmed page background   */
  --white: #ffffff;

  /* --- Neutrals ---------------------------------------------------- */
  --cola: #3C2E2A;               /* warm secondary dark (grounds)     */
  --dove: #625855;               /* warm gray, muted / secondary text */
  --slate: #D9D9D9;              /* light gray, dividers / fills      */

  /* --- Brand color ------------------------------------------------- */
  --tomato: #CD3E1D;             /* primary accent, links, emphasis   */
  --tomato-80: rgba(205, 62, 29, 0.80);
  --tomato-20: rgba(205, 62, 29, 0.20);
  --tomato-10: rgba(205, 62, 29, 0.10);
  --blue-gray: #728FA8;          /* secondary, supporting UI          */
  --teal: #5EA6B1;               /* expressive accent                 */

  /* --- Soft tints (panels, cards, highlights) ---------------------- */
  --tea: #E8EBD7;                /* pale green tint                   */
  --lilac: #F4DCEA;              /* pale pink tint                    */

  /* Hairlines */
  --rule: rgba(32, 29, 28, 0.10);
  --rule-strong: rgba(32, 29, 28, 0.22);
  --rule-light: rgba(255, 255, 255, 0.18);

  /* --- Grounds ----------------------------------------------------- */
  --grad-brand: linear-gradient(150deg, #2A2422 0%, #201D1C 55%, #171413 100%);
  --grad-cool: linear-gradient(150deg, #2E2A28 0%, #201D1C 100%);
  --grad-warm: linear-gradient(150deg, #3C2E2A 0%, #241C1A 70%, #201D1C 100%);
  --grad-hero: radial-gradient(circle at 82% 14%, rgba(205, 62, 29, 0.14) 0%, transparent 46%),
               radial-gradient(circle at 12% 88%, rgba(94, 166, 177, 0.10) 0%, transparent 44%),
               linear-gradient(160deg, #2A2422 0%, #201D1C 60%, #171413 100%);
  --grad-divider: radial-gradient(circle at 88% 20%, rgba(205, 62, 29, 0.12) 0%, transparent 42%),
                  linear-gradient(150deg, #3C2E2A 0%, #241C1A 72%, #201D1C 100%);

  /* --- Type -------------------------------------------------------- */
  --font-display: 'ABC Diatype', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'ABC Diatype', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'ABC Diatype Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-secondary: 'Styrene A', 'Helvetica Neue', Arial, sans-serif;
}

/* Browsers default code/kbd/samp/pre to their own monospace family, bypassing
   --font-mono entirely. Map them back here rather than asking every rule to
   remember. The size step keeps Semi Mono from out-measuring the body text. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.94em;
}