/* ============================================================ cca-themes.css — Single source of truth for CCA portal colors. How it works: :root → default values (dark theme — Jason's pick) [data-theme="light"]:root, :root[data-theme="light"] → overrides for light theme The dark-portal-v2.css and light-portal-v2.css stylesheets read these variables instead of hardcoding hex values. To switch themes at runtime: set data-theme on . Token naming convention: --cca-bg-* page/surface backgrounds --cca-text-* text colors --cca-border-* borders / dividers --cca-accent-* primary brand accent (gold dark / blue light) --cca-status-* success / warning / error --cca-shadow-* elevation shadows Brand v1.1 — see ~/mac-mini-apps/DESIGN-SYSTEM.md ============================================================ */ :root, :root[data-theme="dark"] { /* Backgrounds */ --cca-bg-page: #0c1b2a; /* navy — page bg */ --cca-bg-surface: #111113; /* card surface */ --cca-bg-elevated: #1a1a1d; /* modal / popover */ --cca-bg-input: #1a1a1d; /* form inputs */ /* Text */ --cca-text-primary: #ede8de; /* cream — body */ --cca-text-secondary: rgba(237, 232, 222, 0.72); --cca-text-tertiary: rgba(237, 232, 222, 0.50); --cca-text-muted: #807b73; /* Borders */ --cca-border-default: rgba(255, 255, 255, 0.075); --cca-border-subtle: rgba(255, 255, 255, 0.04); --cca-border-hover: rgba(255, 255, 255, 0.18); /* Accent — dark theme = gold */ --cca-accent: #D4A853; --cca-accent-dark: #B8922F; /* hover */ --cca-accent-light: #E3BF72; /* active */ --cca-accent-soft: rgba(212, 168, 83, 0.15); --cca-accent-glow: rgba(212, 168, 83, 0.40); /* Status */ --cca-status-success: #4ade80; --cca-status-success-bg: rgba(74, 222, 128, 0.15); --cca-status-warning: #fbbf24; --cca-status-warning-bg: rgba(251, 191, 36, 0.15); --cca-status-error: #f87171; --cca-status-error-bg: rgba(248, 113, 113, 0.15); --cca-status-info: #60a5fa; --cca-status-info-bg: rgba(96, 165, 250, 0.15); /* Shadows */ --cca-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --cca-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40); --cca-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.50); /* Theme-color meta (iOS PWA status bar) */ --cca-theme-color: #0c1b2a; color-scheme: dark; } :root[data-theme="light"] { /* Backgrounds */ --cca-bg-page: #f8fafc; --cca-bg-surface: #ffffff; --cca-bg-elevated: #ffffff; --cca-bg-input: #ffffff; /* Text */ --cca-text-primary: #1e293b; --cca-text-secondary: #475569; --cca-text-tertiary: #64748b; --cca-text-muted: #94a3b8; /* Borders */ --cca-border-default: #e2e8f0; --cca-border-subtle: #f1f5f9; --cca-border-hover: #cbd5e1; /* Accent — light theme = blue (per brand v1.1 light-theme rule) */ --cca-accent: #2563EB; --cca-accent-dark: #1d4ed8; --cca-accent-light: #60a5fa; --cca-accent-soft: rgba(37, 99, 235, 0.10); --cca-accent-glow: rgba(37, 99, 235, 0.25); /* Status (slightly punchier for light bg) */ --cca-status-success: #16a34a; --cca-status-success-bg: #dcfce7; --cca-status-warning: #d97706; --cca-status-warning-bg: #fef3c7; --cca-status-error: #dc2626; --cca-status-error-bg: #fee2e2; --cca-status-info: #2563eb; --cca-status-info-bg: #dbeafe; /* Shadows */ --cca-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --cca-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08); --cca-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12); --cca-theme-color: #f8fafc; color-scheme: light; } /* Backwards-compatibility aliases for tokens dark-portal-v2.css and light-portal-v2.css used previously. These let existing rules keep working unchanged during the migration. Remove in Phase 5 cleanup. */ :root { --bg-page: var(--cca-bg-page); --bg-surface: var(--cca-bg-surface); --bg-elevated: var(--cca-bg-elevated); --bg-input: var(--cca-bg-input); --text-primary: var(--cca-text-primary); --text-secondary: var(--cca-text-secondary); --text-tertiary: var(--cca-text-tertiary); --border-default: var(--cca-border-default); --border-subtle: var(--cca-border-subtle); --border-hover: var(--cca-border-hover); --cca-gold: var(--cca-accent); --cca-gold-soft: var(--cca-accent-soft); } /* Typography — same in both themes */ :root { --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } /* ============================================================ PRE-PAINT SNIPPET (paste in BEFORE this stylesheet) ============================================================ ============================================================ *//* ============================================================ PRE-PAINT SNIPPET (paste in BEFORE this stylesheet) ============================================================ ============================================================ */