/* ══════════════════════════════════════════════════════════════════════════ SOL THEME — the Certainty Scheme · one font, one base, one accent, 3 states ══════════════════════════════════════════════════════════════════════════ Canonical source of truth for the SOL look. See SOL_FONT_COLOR_SCHEME.md. Applied by assets/sol-theme.js which: 1. Reads sol_theme from localStorage (instant no-flash load) 2. Syncs with DB preference via /api/me (on auth pages) 3. Writes data-theme="dark|light" on PRINCIPLE — certainty through reduction: · ONE font (Inter) carries the whole hierarchy. You always know what you're reading. Mono falls back to the system stack — no 2nd download. · ONE base (navy) + ONE accent (SOL gold). · A 3-state expectation language in the universal traffic-light grammar humans read on instinct: green = on target · gold = watch · coral = off. Dark = default · gold-on-navy SOL brand Light = cool-grey page with white cards, gold accents preserved Auto = follows OS prefers-color-scheme Usage: body { font-family: var(--sol-font-body); color: var(--sol-text-primary); background: var(--sol-bg-primary); } h1,h2 { font-family: var(--sol-font-display); } code { font-family: var(--sol-font-mono); } ══════════════════════════════════════════════════════════════════════════ */ /* ── CANONICAL FONT IMPORT ────────────────────────────────────────────── One font for the whole galaxy. Pages that link sol-theme.css inherit the SOL type system automatically — no per-page Google Fonts needed. @import must precede all style rules (comments excepted). ──────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── TYPOGRAPHY (theme-independent — same in dark/light/auto) ────────────── */ :root { /* One family carries display + body. Mono uses the system stack (no fetch). */ --sol-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --sol-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --sol-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace; /* Weight scale (matches the imported Inter axes) */ --sol-weight-light: 300; --sol-weight-regular: 400; --sol-weight-medium: 500; --sol-weight-semibold: 600; --sol-weight-bold: 700; --sol-weight-extrabold: 800; --sol-weight-black: 900; } /* ── DARK (default) ─────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --sol-bg-primary: #0E1124; /* base navy — calm, premium, confident */ --sol-bg-secondary: #161A33; --sol-bg-tertiary: #1B2040; --sol-bg-card: #1B2040; /* cards float LIGHTER than base — inviting */ --sol-bg-hover: rgba(246,239,220,0.04); --sol-text-primary: #F6EFDC; /* parchment — high contrast */ --sol-text-secondary: rgba(246,239,220,0.62); --sol-text-muted: rgba(246,239,220,0.34); --sol-text-inverse: #0E1124; --sol-accent-gold: #F0C24A; /* brightened SOL gold — the one accent */ --sol-accent-gold-bright:#FFD66B; --sol-accent-gold-dim: rgba(240,194,74,0.14); --sol-accent-green: #34D399; --sol-accent-red: #F4845F; /* warm coral — decisive, not alarming */ --sol-accent-blue: #4A90E2; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(246,239,220,0.10); --sol-border-accent: #F0C24A; --sol-border-strong: rgba(246,239,220,0.28); --sol-input-bg: #161A33; --sol-input-border: rgba(246,239,220,0.18); --sol-input-text: #F6EFDC; --sol-input-placeholder: rgba(246,239,220,0.34); --sol-input-focus: #F0C24A; --sol-shadow: 0 8px 30px rgba(0,0,0,0.45); --sol-shadow-sm: 0 2px 10px rgba(0,0,0,0.35); /* The 3-state expectation language (traffic-light grammar). Semantic, not theme decoration — but tuned per mode for contrast. */ --sol-hit: #34D399; /* HIT · On Target — emerald */ --sol-miss: #F4845F; /* MISS · Off — warm coral */ --sol-adjust: #F0C24A; /* ADJUST · Watch — gold/amber */ } /* ── LIGHT ──────────────────────────────────────────────────────────────── */ /* Cool-grey page background — white cards float above it for clear hierarchy. */ [data-theme="light"] { --sol-bg-primary: #F4F5FB; /* cool grey page bg — cards pop above */ --sol-bg-secondary: #EAECF6; --sol-bg-tertiary: #DFE2F0; --sol-bg-card: #FFFFFF; /* pure white cards on grey bg */ --sol-bg-hover: rgba(20,23,41,0.05); --sol-text-primary: #141729; /* near-black with slight blue tint */ --sol-text-secondary: rgba(20,23,41,0.62); --sol-text-muted: rgba(20,23,41,0.40); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #A87A0E; /* deeper gold — readable on white */ --sol-accent-gold-bright:#C8951A; --sol-accent-gold-dim: rgba(168,112,14,0.14); --sol-accent-green: #0F9D6B; --sol-accent-red: #D2532E; /* deeper warm coral for light */ --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(20,23,41,0.14); --sol-border-accent: #A87A0E; --sol-border-strong: rgba(20,23,41,0.32); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(20,23,41,0.22); --sol-input-text: #141729; --sol-input-placeholder: rgba(20,23,41,0.40); --sol-input-focus: #A87A0E; --sol-shadow: 0 4px 18px rgba(20,23,41,0.10); --sol-shadow-sm: 0 1px 5px rgba(20,23,41,0.08); --sol-hit: #0F9D6B; /* On Target */ --sol-miss: #D2532E; /* Off */ --sol-adjust: #A87A0E; /* Watch */ } /* ══ DAUGHTER PALETTES ══════════════════════════════════════════════════ Three extra themes chosen by Caleb's daughters (their favorite colors). Light-based and pretty: her color is the hero accent on a soft tinted base, text stays high-contrast, and the on-target/watch/off language is preserved so each is still a working SOL surface. Draft — pending Caleb + Rachel joint ratification before any daughter-facing deploy. ─────────────────────────────────────────────────────────────────────── */ /* ── RYLEE · 💗 Pink ──────────────────────────────────────────────────── */ [data-theme="rylee"] { --sol-bg-primary: #FFF5F9; --sol-bg-secondary: #FCE7EF; --sol-bg-tertiary: #F8D3E2; --sol-bg-card: #FFFFFF; --sol-bg-hover: rgba(232,76,138,0.06); --sol-text-primary: #3A1226; --sol-text-secondary: rgba(58,18,38,0.62); --sol-text-muted: rgba(58,18,38,0.42); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #E84C8A; /* hero — pink */ --sol-accent-gold-bright:#FF6FA8; --sol-accent-gold-dim: rgba(232,76,138,0.14); --sol-accent-green: #15803D; --sol-accent-red: #D2532E; --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #B03270; --sol-border-subtle: rgba(58,18,38,0.12); --sol-border-accent: #E84C8A; --sol-border-strong: rgba(58,18,38,0.30); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(58,18,38,0.20); --sol-input-text: #3A1226; --sol-input-placeholder: rgba(58,18,38,0.42); --sol-input-focus: #E84C8A; --sol-shadow: 0 4px 18px rgba(180,40,100,0.12); --sol-shadow-sm: 0 1px 5px rgba(180,40,100,0.10); --sol-hit: #15803D; --sol-miss: #D2532E; --sol-adjust: #C08A00; } /* ── BRIELLE · 🩵 Aqua (light blue · cyan · darker green) ──────────────── */ [data-theme="brielle"] { --sol-bg-primary: #EFFAFB; --sol-bg-secondary: #DBF1F4; --sol-bg-tertiary: #C6E8ED; --sol-bg-card: #FFFFFF; --sol-bg-hover: rgba(8,145,178,0.06); --sol-text-primary: #0C2E33; --sol-text-secondary: rgba(12,46,51,0.62); --sol-text-muted: rgba(12,46,51,0.42); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #0891B2; /* hero — cyan */ --sol-accent-gold-bright:#22B8D9; --sol-accent-gold-dim: rgba(8,145,178,0.14); --sol-accent-green: #0F7A4A; /* her darker green */ --sol-accent-red: #D2532E; --sol-accent-blue: #1E6FBF; /* light blue */ --sol-accent-blue-nav: #0E7490; --sol-border-subtle: rgba(12,46,51,0.12); --sol-border-accent: #0891B2; --sol-border-strong: rgba(12,46,51,0.30); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(12,46,51,0.20); --sol-input-text: #0C2E33; --sol-input-placeholder: rgba(12,46,51,0.42); --sol-input-focus: #0891B2; --sol-shadow: 0 4px 18px rgba(8,90,110,0.12); --sol-shadow-sm: 0 1px 5px rgba(8,90,110,0.10); --sol-hit: #0F7A4A; /* darker green = on target */ --sol-miss: #D2532E; --sol-adjust: #C08A00; } /* ── ELEANOR · 💜 Purple ──────────────────────────────────────────────── */ [data-theme="eleanor"] { --sol-bg-primary: #F7F2FC; --sol-bg-secondary: #EDE3F8; --sol-bg-tertiary: #E0D0F1; --sol-bg-card: #FFFFFF; --sol-bg-hover: rgba(124,58,237,0.06); --sol-text-primary: #2A1240; --sol-text-secondary: rgba(42,18,64,0.62); --sol-text-muted: rgba(42,18,64,0.42); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #7C3AED; /* hero — purple */ --sol-accent-gold-bright:#9D5CF5; --sol-accent-gold-dim: rgba(124,58,237,0.14); --sol-accent-green: #15803D; --sol-accent-red: #D2532E; --sol-accent-blue: #5B4BE0; --sol-accent-blue-nav: #6D28D9; --sol-border-subtle: rgba(42,18,64,0.12); --sol-border-accent: #7C3AED; --sol-border-strong: rgba(42,18,64,0.30); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(42,18,64,0.20); --sol-input-text: #2A1240; --sol-input-placeholder: rgba(42,18,64,0.42); --sol-input-focus: #7C3AED; --sol-shadow: 0 4px 18px rgba(90,40,150,0.12); --sol-shadow-sm: 0 1px 5px rgba(90,40,150,0.10); --sol-hit: #15803D; --sol-miss: #D2532E; --sol-adjust: #C08A00; } /* ── AUTO — defer to OS preference ─────────────────────────────────────── */ /* sol-theme.js handles the data-theme attribute swap for auto mode. This block is a safety net for JS-off or SSR scenarios. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --sol-bg-primary: #F4F5FB; --sol-bg-secondary: #EAECF6; --sol-bg-tertiary: #DFE2F0; --sol-bg-card: #FFFFFF; --sol-bg-hover: rgba(20,23,41,0.05); --sol-text-primary: #141729; --sol-text-secondary: rgba(20,23,41,0.62); --sol-text-muted: rgba(20,23,41,0.40); --sol-text-inverse: #FFFFFF; --sol-accent-gold: #A87A0E; --sol-accent-gold-bright:#C8951A; --sol-accent-gold-dim: rgba(168,112,14,0.14); --sol-accent-green: #0F9D6B; --sol-accent-red: #D2532E; --sol-accent-blue: #1155CC; --sol-accent-blue-nav: #0B5394; --sol-border-subtle: rgba(20,23,41,0.14); --sol-border-accent: #A87A0E; --sol-border-strong: rgba(20,23,41,0.32); --sol-input-bg: #FFFFFF; --sol-input-border: rgba(20,23,41,0.22); --sol-input-text: #141729; --sol-input-placeholder: rgba(20,23,41,0.40); --sol-input-focus: #A87A0E; --sol-shadow: 0 4px 18px rgba(20,23,41,0.10); --sol-shadow-sm: 0 1px 5px rgba(20,23,41,0.08); --sol-hit: #0F9D6B; --sol-miss: #D2532E; --sol-adjust: #A87A0E; } }