/* Asta theme — dark-mode-first, green as primary action. * * Activated by setting `data-theme="asta"` on . * Pairs with tokens.css (the default Otus look stays the unset baseline). * * Primitives sourced from allenai/design.md → asta/DESIGN.md. Same palette * as Strata; only the semantic aliases differ (dark-first, green primary). */ :root[data-theme="asta"] { /* ── surfaces ───────────────────────────────────────────────────────── */ --otus-bg: #032629; /* extra-dark-teal */ --otus-surface-1: #105257; /* teal — primary panel */ --otus-surface-2: #0a3235; /* dark-teal — nested panel */ --otus-surface-overlay: rgba(3, 38, 41, 0.85); /* extra-dark scrim */ /* ── text ───────────────────────────────────────────────────────────── */ --otus-text: #faf2e9; /* cream */ --otus-text-muted: #cbd2cc; /* teal-20 */ --otus-text-disabled: #5d5d5d; /* gray-80 */ /* ── accents ────────────────────────────────────────────────────────── */ --otus-accent: #0fcb8c; /* green — Asta's primary action */ --otus-accent-soft: rgba(15, 203, 140, 0.14); /* green @ 14% — hover fill */ --otus-accent-faint: #cbead6; /* green-20 */ --otus-accent-mid: #9ce2c4; /* green-40 */ --otus-accent-strong: #3ed39f; /* green-80 */ --otus-accent-secondary: #105257; /* teal */ --otus-accent-pink: #f0529c; /* preserved — tertiary */ --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 teal/green accent fills */ /* ── status ─────────────────────────────────────────────────────────── */ --otus-danger: #fd4645; /* error-red */ --otus-warning: #ffa31c; /* warning-orange */ --otus-success: #549c35; /* success-green */ /* ── lines ──────────────────────────────────────────────────────────── */ --otus-border: rgba(250, 242, 233, 0.10); /* cream hairline on dark */ --otus-border-strong: #3f7274; /* teal-80 — distinct from accent */ }