/* Strata theme — light-mode-first, pink as primary action. * * Activated by setting `data-theme="strata"` on . * Pairs with tokens.css (the default Otus look stays the unset baseline). * * Primitives sourced from allenai/design.md → strata/DESIGN.md. * See docs/decisions/2026-06-15_design_tokens.md (if/when adopted). */ :root[data-theme="strata"] { /* ── surfaces ───────────────────────────────────────────────────────── */ --otus-bg: #faf2e9; /* cream */ --otus-surface-1: #f8d2da; /* pink-20 — primary panel */ --otus-surface-2: #ffffff; /* white — nested panel */ --otus-surface-overlay: rgba(10, 50, 53, 0.55); /* dark-teal scrim on light */ /* ── text ───────────────────────────────────────────────────────────── */ --otus-text: #0a3235; /* dark-teal */ --otus-text-muted: #5d5d5d; /* gray-80 */ --otus-text-disabled: #aeaeae; /* gray-40 */ /* ── accents ────────────────────────────────────────────────────────── */ --otus-accent: #f0529c; /* pink — Strata's primary action */ --otus-accent-soft: #f8d2da; /* pink-20 — hover/selected fill */ --otus-accent-faint: #f8d2da; /* pink-20 */ --otus-accent-mid: #f6b2ca; /* pink-40 */ --otus-accent-strong: #f272ab; /* pink-80 */ --otus-accent-secondary: #105257; /* teal — secondary */ --otus-accent-pink: #f0529c; /* preserved */ --otus-accent-pink-faint:#f8d2da; /* pink-20 */ /* ── font families (per allenai/design.md spec) ────────────────────── * Headings use PP Telegraf (falls back to Manrope), body uses Manrope, * code uses Roboto Mono. The compound --otus-type-* tokens in tokens.css * resolve these at consume-time, so no other tokens need overriding. */ --otus-font-family-heading: "PP Telegraf", "Manrope", Arial, sans-serif; --otus-font-family-body: "Manrope", Arial, sans-serif; --otus-font-family-mono: "Roboto Mono", ui-monospace, Menlo, monospace; --otus-font-family: var(--otus-font-family-body); /* ── contrast ───────────────────────────────────────────────────────── */ --otus-text-on-accent: #faf2e9; /* cream on pink accent */ /* ── status ─────────────────────────────────────────────────────────── */ --otus-danger: #fd4645; /* error-red */ --otus-warning: #ffa31c; /* warning-orange */ --otus-success: #549c35; /* success-green */ /* ── lines ──────────────────────────────────────────────────────────── */ --otus-border: rgba(10, 50, 53, 0.10); /* dark hairline on light */ --otus-border-strong: #cbd2cc; /* teal-20 */ }