/* Otus design tokens — 14 semantic roles.
 *
 * This file is the seam between Otus styling and any external design system.
 * To re-theme (Strata, Asta, or custom), edit ONLY this file — every component
 * elsewhere consumes --otus-* vars, never raw hex.
 *
 * Current values preserve the look as of v0.7.1. Mapping comments show which
 * legacy literals each role replaced and how often they appeared.
 */
:root {
  /* ── surfaces ───────────────────────────────────────────────────────── */
  --otus-bg:               #0d1117;                /* page canvas  (×4)         */
  --otus-surface-1:        #1a5a5e;                /* primary panel (×11)       */
  --otus-surface-2:        #0c3d40;                /* nested panel (×11)        */
  --otus-surface-overlay:  rgba(15,23,42,0.95);    /* modal/drawer scrim (×6)   */

  /* ── text ───────────────────────────────────────────────────────────── */
  --otus-text:             #e0e8f0;                /* primary text (×15)        */
  --otus-text-muted:       #aaa;                   /* secondary text (×12)      */
  --otus-text-disabled:    #555;                   /* disabled text (×5)        */

  /* ── accents ────────────────────────────────────────────────────────── */
  --otus-accent:           #2dd4bf;                /* primary action / Otus signature teal-400 (×35) */
  --otus-accent-soft:      rgba(45,212,191,0.14);  /* hover/selected accent fill        */
  --otus-accent-faint:     #2dd4bf33;              /* accent @ ~20% alpha — soft borders/bg (×5)  */
  --otus-accent-mid:       #2dd4bf55;              /* accent @ ~33% alpha — hover borders   (×5)  */
  --otus-accent-strong:    #2dd4bf99;              /* accent @ ~60% alpha — emphasis text   (×4)  */
  --otus-accent-secondary: #a78bfa;                /* secondary accent / violet (×18) */
  --otus-accent-pink:      #f0529c;                /* tertiary accent / pink (×21) */
  --otus-accent-pink-faint:#f0529c22;              /* pink @ ~13% alpha — subtle fill (×4)  */

  /* ── contrast ───────────────────────────────────────────────────────── */
  --otus-text-on-accent:   #111;                   /* text sitting on accent-secondary fills */

  /* ── status ─────────────────────────────────────────────────────────── */
  --otus-danger:           #f87171;                /* error / red (×22)         */
  --otus-warning:           #fbbf24;               /* warning / amber (×5)      */
  --otus-success:          #4ade80;                /* success / green (×5)      */

  /* ── lines ──────────────────────────────────────────────────────────── */
  --otus-border:           rgba(255,255,255,0.06); /* hairline border           */
  --otus-border-strong:    #2e2e4e;                /* emphasized border (×11)   */

  /* ── font families ───────────────────────────────────────────────────
   * Three families, split because the Strata/Asta spec uses PP Telegraf
   * for headings, Manrope for body, and Roboto Mono for code. Default
   * Otus keeps all three as Merriweather (heading + body) and ui-mono.
   * Backwards-compat: --otus-font-family still resolves to the body face.
   */
  --otus-font-family-heading: "Merriweather", serif;
  --otus-font-family-body:    "Merriweather", serif;
  --otus-font-family-mono:    ui-monospace, Menlo, monospace;
  --otus-font-family:         var(--otus-font-family-body);

  /* ── compound type tokens (allenai/design.md spec) ───────────────────
   * One token per type role, encoding family + size + weight + line-height
   * via the CSS `font:` shorthand. Consume with `font: var(--otus-type-X)`.
   * The family is resolved through --otus-font-family-{heading,body,mono},
   * so theme variants only need to override those three families.
   */
  --otus-type-display:     700 3rem    /1.1 var(--otus-font-family-heading);
  --otus-type-heading-xl:  700 2.5rem  /1.2 var(--otus-font-family-heading);
  --otus-type-heading-lg:  700 2rem    /1.2 var(--otus-font-family-heading);
  --otus-type-heading-md:  600 1.5rem  /1.3 var(--otus-font-family-heading);
  --otus-type-heading-sm:  600 1.25rem /1.4 var(--otus-font-family-heading);
  --otus-type-body-lg:     400 18px    /1.6 var(--otus-font-family-body);
  --otus-type-body-md:     400 16px    /1.6 var(--otus-font-family-body);
  --otus-type-body-sm:     400 14px    /1.5 var(--otus-font-family-body);
  --otus-type-body-xs:     400 12px    /1.5 var(--otus-font-family-body);
  --otus-type-mono:        400 14px    /1.6 var(--otus-font-family-mono);

  /* ── individual font-size tokens (legacy / partial use) ──────────────
   * Pre-date the compound tokens above. Still used by call sites that
   * only want to override size without touching weight/line-height.
   * Same numbers as the spec.
   */
  --otus-font-display:     3rem;
  --otus-font-heading-xl:  2.5rem;
  --otus-font-heading-lg:  2rem;
  --otus-font-heading-md:  1.5rem;
  --otus-font-heading-sm:  1.25rem;
  --otus-font-body-lg:     1.125rem;
  --otus-font-body-md:     1rem;
  --otus-font-body-sm:     0.875rem;
  --otus-font-body-xs:     0.75rem;
  --otus-font-mono:        0.875rem;

  /* ── Pending fold (FOR DESIGN REVIEW) ──────────────────────────────────
   * 15 distinct font-size literals still in use that don't sit exactly on
   * the Strata scale. Each one needs a fold decision before we eliminate
   * raw font-size: literals entirely. Listed by count, highest first.
   *
   *   16× font-size: 0.8rem      (12.8px)  → body-sm? body-xs?
   *   15× font-size: 0.72rem     (11.5px)  → body-xs? new --otus-font-caption?
   *   12× font-size: 0.85rem     (13.6px)  → body-sm?
   *    9× font-size: 0.82rem     (13.1px)  → body-sm?
   *    8× font-size: 0.78rem     (12.5px)  → body-xs? body-sm?
   *    7× font-size: 0.9rem      (14.4px)  → body-sm?
   *    6× font-size: 0.68rem     (10.9px)  → caption?
   *    6× font-size: 0.65rem     (10.4px)  → caption?
   *    4× font-size: 0.7rem      (11.2px)  → caption?
   *    4× font-size: 0.8125rem   (13px)    → body-sm?
   *    2× font-size: 0.85em      (relative) → keep as em or move to absolute?
   *    2× font-size: 0.6rem      (9.6px)   → drop / fold to caption
   *    1× font-size: 1.1rem      (17.6px)  → body-lg?
   *    1× font-size: 1.1em                  → keep relative?
   *    1× font-size: 15px                   → body-md (16px)?
   */
}