/* ───────────────────────────────────────────────────────────────────────────── Greylander Press / SLR Studio — Design Token Contract Single source of truth. Both modes defined explicitly. Mode resolution: 1. Explicit: or 2. Auto: no data-theme attribute → @media (prefers-color-scheme) All components reference tokens, never raw color values. Verify WCAG AA contrast (4.5:1 body text, 3:1 large text, 3:1 UI controls) in both modes when adding or refactoring a component. ───────────────────────────────────────────────────────────────────────────── */ /* ── DARK MODE (default) ──────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg-primary: #13100c; /* body background */ --bg-secondary: #1f1a13; /* alternate sections */ --surface: #1a1610; /* cards, modals — slightly elevated */ --surface-strong: #2a2318; /* nested surfaces, input wells */ /* Text */ --text-primary: #e8dece; /* body text — 13.6:1 on bg-primary */ --text-secondary: #c8bca8; /* sub-headings, less critical text */ --text-muted: #9a8e7e; /* labels, meta, captions — 5.4:1 on bg-primary */ /* Accent */ --accent: #d4aa4a; /* gold-light — primary accent on dark — 8.2:1 on bg */ --accent-strong: #b8922a; /* gold — for filled buttons, emphasis */ --accent-soft: rgba(184,146,42,0.08); /* tinted bg fills */ /* Borders */ --border-default: rgba(184,146,42,0.30); --border-strong: rgba(184,146,42,0.55); --border-muted: rgba(255,255,255,0.08); /* Inputs */ --input-bg: rgba(255,255,255,0.04); --input-border: rgba(184,146,42,0.30); --input-text: #e8dece; --input-placeholder: #7a6a52; --input-focus: #d4aa4a; /* Buttons */ --btn-primary-bg: #b8922a; --btn-primary-bg-hover: #d4aa4a; --btn-primary-text: #13100c; --btn-secondary-bg: transparent; --btn-secondary-text: #c8bca8; --btn-secondary-border: rgba(184,146,42,0.30); --btn-secondary-text-hover: #d4aa4a; /* States */ --error: #e74c3c; --error-bg: rgba(231,76,60,0.08); --success: #6aa83a; --success-bg: rgba(106,168,58,0.10); --warning: #d4742a; /* Pillar bands (Gauntlet Report Card) */ --band-professional: #6aa83a; /* green — meets standard */ --band-competent: #d4aa4a; /* yellow/gold — working with weaknesses */ --band-developmental: #d4742a; /* orange — substantive issues */ --band-foundational: #c0392b; /* red — fundamental problems */ /* Overlay scrims */ --scrim-strong: rgba(14,11,8,0.94); --scrim-soft: rgba(14,11,8,0.65); /* Typography */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --font-mono: 'DM Mono', ui-monospace, monospace; /* Legacy aliases — explicit values per mode (no var() chain). Existing rules across pages still reference these names; defining them here makes them theme-aware without per-page edits. Refactor toward canonical tokens above as the audit progresses. */ --ink: #13100c; --ink-soft: #1f1a13; --cream: #e8dece; --cream-dim: #c8bca8; --gold: #b8922a; --gold-light: #d4aa4a; --rule: rgba(184,146,42,0.30); --text: #e8dece; --text-dim: #9a8e7e; --bg: #13100c; color-scheme: dark; } /* ── LIGHT MODE ───────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-primary: #faf6f0; --bg-secondary: #f0e8d8; --surface: #fdfaf3; --surface-strong: #efe6d0; --text-primary: #2a1f0e; /* 12.4:1 on bg-primary */ --text-secondary: #4a3a20; /* 8.5:1 */ --text-muted: #7a6a52; /* 4.6:1 — passes AA body */ --accent: #8a6a1a; /* 5.6:1 on bg-primary — passes AA body */ --accent-strong: #6f5512; /* darker for high-emphasis on light */ --accent-soft: rgba(138,106,26,0.08); --border-default: rgba(138,106,26,0.25); --border-strong: rgba(138,106,26,0.50); --border-muted: rgba(0,0,0,0.08); --input-bg: rgba(0,0,0,0.04); --input-border: rgba(138,106,26,0.30); --input-text: #2a1f0e; --input-placeholder: #9a8e7e; --input-focus: #8a6a1a; --btn-primary-bg: #8a6a1a; --btn-primary-bg-hover: #6f5512; --btn-primary-text: #faf6f0; --btn-secondary-bg: transparent; --btn-secondary-text: #4a3a20; --btn-secondary-border: rgba(138,106,26,0.35); --btn-secondary-text-hover: #8a6a1a; --error: #b03a2e; --error-bg: rgba(176,58,46,0.08); --success: #4a7a32; --success-bg: rgba(74,122,50,0.10); --warning: #a8551c; --band-professional: #4a7a32; --band-competent: #a07f25; --band-developmental: #a8551c; --band-foundational: #b03a2e; --scrim-strong: rgba(250,246,240,0.94); --scrim-soft: rgba(250,246,240,0.65); /* Legacy aliases — light mode explicit values */ --ink: #faf6f0; --ink-soft: #f0e8d8; --cream: #2a1f0e; --cream-dim: #4a3a20; --gold: #6f5512; --gold-light: #8a6a1a; --rule: rgba(138,106,26,0.25); --text: #2a1f0e; --text-dim: #7a6a52; --bg: #faf6f0; color-scheme: light; } } /* ── EXPLICIT LIGHT (toggle override) ─────────────────────────────────────── */ :root[data-theme="light"] { --bg-primary: #faf6f0; --bg-secondary: #f0e8d8; --surface: #fdfaf3; --surface-strong: #efe6d0; --text-primary: #2a1f0e; --text-secondary: #4a3a20; --text-muted: #7a6a52; --accent: #8a6a1a; --accent-strong: #6f5512; --accent-soft: rgba(138,106,26,0.08); --border-default: rgba(138,106,26,0.25); --border-strong: rgba(138,106,26,0.50); --border-muted: rgba(0,0,0,0.08); --input-bg: rgba(0,0,0,0.04); --input-border: rgba(138,106,26,0.30); --input-text: #2a1f0e; --input-placeholder: #9a8e7e; --input-focus: #8a6a1a; --btn-primary-bg: #8a6a1a; --btn-primary-bg-hover: #6f5512; --btn-primary-text: #faf6f0; --btn-secondary-bg: transparent; --btn-secondary-text: #4a3a20; --btn-secondary-border: rgba(138,106,26,0.35); --btn-secondary-text-hover: #8a6a1a; --error: #b03a2e; --error-bg: rgba(176,58,46,0.08); --success: #4a7a32; --success-bg: rgba(74,122,50,0.10); --warning: #a8551c; --band-professional: #4a7a32; --band-competent: #a07f25; --band-developmental: #a8551c; --band-foundational: #b03a2e; --scrim-strong: rgba(250,246,240,0.94); --scrim-soft: rgba(250,246,240,0.65); /* Legacy aliases — light mode explicit values */ --ink: #faf6f0; --ink-soft: #f0e8d8; --cream: #2a1f0e; --cream-dim: #4a3a20; --gold: #6f5512; --gold-light: #8a6a1a; --rule: rgba(138,106,26,0.25); --text: #2a1f0e; --text-dim: #7a6a52; --bg: #faf6f0; color-scheme: light; } /* ── EXPLICIT DARK (toggle override; identical to root defaults) ──────────── */ :root[data-theme="dark"] { /* Inherits :root defaults; explicit selector exists so a system-light user who chose Dark gets the dark values regardless of @media. */ color-scheme: dark; } /* ── Shared component: theme toggle ───────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); padding: 0.35rem 0.75rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; line-height: 1; white-space: nowrap; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; } .theme-toggle [data-theme-icon] { font-size: 0.95rem; line-height: 1; }