/* ============================================================================ theme.css — single source of truth for design TOKENS (College Comparison) ---------------------------------------------------------------------------- This is the CURRENT dark palette, centralized verbatim. Linking it into a template and deleting that template's inline `:root {…}` block is therefore a NO-visual-change refactor. Re-theming the whole app later (e.g. the warm light + deep-green direction in design/04_design_brief.md) becomes a single edit here instead of a sweep across ~16 templates. Audited 2026-06-07: the 6 core tokens are identical across all student/admin templates. Intentional exceptions keep a tiny local override AFTER this link: - panel_vibe_preview.html → --accent: #60a5fa (blue, internal tool) Usage in a template : then remove the inline `:root { --bg: … }` line from that template. ============================================================================ */ :root { /* --- Core surface + text --- */ --bg: #0f0f0f; /* page background */ --surface: #1a1a2e; /* cards / raised surfaces */ --border: #2a2a3e; /* subtle borders */ --text: #e4e4e7; /* primary text */ --text-muted: #9ca3af; /* secondary / metadata text */ /* --- Accent (single accent, used deliberately) --- */ --accent: #a78bfa; /* primary accent (purple) */ --accent-dim: rgba(167,139,250,0.15); /* --- Status colors (admin / fit-test / counselor surfaces) --- */ --green: #22c55e; --green-dim: rgba(34,197,94,0.12); --yellow: #f59e0b; --red: #ef4444; /* Aliases: some templates name the same status colors differently. */ --good: #22c55e; --warn: #f59e0b; --bad: #ef4444; } /* ---------------------------------------------------------------------------- v4 — warm light + deep-green redesign (design/04_design_brief.md, wireframes in design/wireframes_v4.html). SCOPED to body[data-theme="v4"] so the legacy dark theme above is untouched and any surface can flip independently behind a flag. Pair with /static/components.css (the v4 class-based component library). ---------------------------------------------------------------------------- */ body[data-theme="v4"] { /* Surfaces — warm paper, not clinical white */ --bg: #FBF8F0; --surface: #FFFFFF; --surface-2: #F4F0E7; /* inset wells, anchor rail, modal headers */ --border: #E3DCC8; --border-strong: #D6CFC0; /* Ink */ --text: #243528; /* near-black, green undertone */ --text-muted: #5C7C5A; --text-faint: #8A938D; /* Accent — deep green, the ONLY brand color */ --accent: #2F4A39; --accent-hover: #243C2E; --accent-dim: rgba(47,74,57,0.08); --accent-ring: rgba(47,74,57,0.30); /* Fit bands — one green family at varying weight (fit is a soft signal; no red) */ --fit-excellent: #2F4A39; --fit-strong: #4E7D63; --fit-decent: #93AE9C; --fit-fair: #C9D4CC; /* Admissions tier — slate, deliberately NOT green (separate axis) */ --tier-bg: #EDEEF1; --tier-text: #515A66; --tier-border: #D8DBE0; /* Status (forms/admin only — never on fit) */ --green: #2E7D52; --good: #2E7D52; --yellow:#B07D1E; --warn: #B07D1E; --red: #B3473E; --bad: #B3473E; --green-dim: rgba(46,125,82,0.12); --accent-dim-legacy: rgba(47,74,57,0.15); /* Type */ --font-display: "Fraunces", Georgia, serif; --font-ui: "Inter", system-ui, sans-serif; /* Shape + depth */ --radius-card: 16px; --radius-control: 10px; --radius-chip: 999px; --shadow-card: 0 1px 2px rgba(28,36,33,.05), 0 4px 16px rgba(28,36,33,.06); --shadow-modal: 0 8px 40px rgba(28,36,33,.18); /* Spacing scale (4px base) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; }