/* biglearn — theme switching. Paper (light) is the primary theme and lives in tokens/colors.css on :root. Dark derives from the design system's own dark-surface tokens; amber stays amber. Precedence: explicit [data-theme] wins over prefers-color-scheme. */ :root { color-scheme: light; /* dark-only derivations (referenced by the dark remap below) */ --dark-text-strong: #E8EAE6; /* headings on dark — one step above --dark-text */ --dark-text-faint: #5C6065; /* tertiary on dark — one step below --dark-mute */ --dark-line-soft: #202326; /* faint inner rules on dark */ --grid-ink-dark: rgba(201, 204, 200, 0.05); /* graph-paper lines on dark */ } /* The dark remap, applied two ways (same block, kept in sync): 1. user toggle: 2. system preference, unless overridden with data-theme="light" */ [data-theme="dark"] { color-scheme: dark; --bg: var(--dark); --surface: var(--dark); --surface-card: var(--dark-raised); --text: var(--dark-text); --text-strong: var(--dark-text-strong); --text-secondary: var(--dark-mute); --text-muted: var(--dark-text-faint); --border: var(--dark-line); --border-soft: var(--dark-line-soft); --border-line: 1px solid var(--dark-line); --grid-ink: var(--grid-ink-dark); --grid-ink-2: var(--grid-ink-dark); --grid-cell: 16px; --shadow-1: 2px 2px 0 rgba(0, 0, 0, 0.35); --shadow-2: 3px 3px 0 rgba(0, 0, 0, 0.40); --shadow-3: 4px 4px 0 rgba(0, 0, 0, 0.35); --shadow-4: 5px 5px 0 rgba(0, 0, 0, 0.30); --shadow-5: 5px 5px 0 rgba(0, 0, 0, 0.45); --shadow-tile: 4px 4px 0 rgba(0, 0, 0, 0.50); --inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--dark); --surface: var(--dark); --surface-card: var(--dark-raised); --text: var(--dark-text); --text-strong: var(--dark-text-strong); --text-secondary: var(--dark-mute); --text-muted: var(--dark-text-faint); --border: var(--dark-line); --border-soft: var(--dark-line-soft); --border-line: 1px solid var(--dark-line); --grid-ink: var(--grid-ink-dark); --grid-ink-2: var(--grid-ink-dark); --grid-cell: 16px; --shadow-1: 2px 2px 0 rgba(0, 0, 0, 0.35); --shadow-2: 3px 3px 0 rgba(0, 0, 0, 0.40); --shadow-3: 4px 4px 0 rgba(0, 0, 0, 0.35); --shadow-4: 5px 5px 0 rgba(0, 0, 0, 0.30); --shadow-5: 5px 5px 0 rgba(0, 0, 0, 0.45); --shadow-tile: 4px 4px 0 rgba(0, 0, 0, 0.50); --inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } }