/* Houghton Photo Learn - design tokens, dark and light. * * The dark theme is COPIED from The Exposure Triangle (the sibling app in the same series), not invented: * source: ClaudeProjects/The Exposure Triangle/web/src/app/globals.css - the first :root block (colours, fonts, easing) * and the :root block that defines the shadows (one light source for every shadow). * copied: 4 October 2026, from that project's state on that day. That project is read-only from here. * Pruned 4 October 2026 (Sprint v0.2): the sibling's dial, plate, metal, ring, rib, paper-prose and category-chip tokens are gone, because * nothing here references them, and a token with no light counterpart is a half-finished theme. When the series shares a design package, * this file is what it replaces. Keep it free of anything specific to this site. * * THE LIGHT THEME is new in this project (the sibling is dark only): standing rule, Joe, 4 Oct 2026, every app ships both. * - Dark is the default. A visitor whose device prefers light gets the light block through the media query; a visitor who has chosen * (the toggle, remembered in localStorage) gets data-theme on , which wins over the device either way. * - The light values live in TWO blocks below, written out twice because CSS cannot share one declaration between a selector and a * media query. scripts/checks/tokens.mjs fails the gate if they ever differ. * - The yellow and blue that pass on near-black fail on white, so each has a deeper light variant (focus, zone, zone-2, logo). * - Every pair is contrast-checked in BOTH themes by that script, against the lightest background it can land on (WCAG AA). * - A token the public pages use must have a light value, except type, easing and the status chips (the checker's INVARIANT list). * - The admin is pinned to dark (data-theme="dark" on its ) until it gets its own light theme; it uses the :root values. * Palette: colourblind-safe blues and yellows on near-black / warm paper. No red, no green. */ :root { color-scheme: dark; --ground: #0c0d10; --panel: #15161a; --raised: #1c1e23; --line: #2b2e36; --line-2: #3a3e48; --ink: #f2efe8; --ink-2: #b8bbc3; --ink-3: #9a9eaa; --focus: #f3c24f; --focus-ink: #1a1405; --zone: #5aa8ff; --zone-2: #8cc4ff; --stage-glow: #1b1d23; --well: #0f1013; /* The Houghton Photo script mark, painted through a mask so one asset serves both themes. #ffdb00 is the mark's own yellow. */ --logo: #ffdb00; /* The colour of a lit top edge, and the colour a shadow is cast in. */ --edge: #f2efe8; --shade: #000000; /* Admin-only (the admin segmented control): the lighter stock the sibling calls paper. The admin is dark-pinned, so these stay here. */ --paper-hi: #fbf8f2; --paper-zone: #2f6fb4; /* DESIGN-INTENT (status chips, 25 Sept 2026, kept 4 Oct 2026): theme-INVARIANT by design - declared in :root only, never overridden. * A chip carries its own fill and its own ink, so it reads on any page; the pair is contrast-checked once. Blues, ambers and greys * only (Joe is red/green colourblind), and every status has its own icon shape as well. */ --chip-planned-bg: #23262d; --chip-planned-ink: #b8bbc3; --chip-progress-bg: #33290d; --chip-progress-ink: #f3c24f; --chip-shipped-bg: #11283f; --chip-shipped-ink: #8cc4ff; --font-display: var(--font-archivo), "Helvetica Neue", Arial, sans-serif; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.22, 1.28, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* One light source for every shadow: a soft key light above and slightly left of the screen, so every shadow falls down and a * touch to the right, and every lit edge is the top one. Layered: a tight contact shadow, then two soft ones. */ --shadow-plate: 0 1px 0 color-mix(in srgb, var(--edge) 8%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--shade) 60%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 35%, transparent), 3px 12px 28px color-mix(in srgb, var(--shade) 45%, transparent), 6px 30px 64px color-mix(in srgb, var(--shade) 35%, transparent); --shadow-lift: 0 1px 0 color-mix(in srgb, var(--edge) 5%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 45%, transparent), 3px 10px 24px color-mix(in srgb, var(--shade) 38%, transparent), 6px 28px 60px color-mix(in srgb, var(--shade) 32%, transparent); --shadow-key: 1px 1px 2px color-mix(in srgb, var(--shade) 55%, transparent); /* A book cover standing on its stage: a one-pixel lit rim first (a near-black cover would otherwise vanish into a near-black page, and a * black shadow cannot show on black), then the same three layers as the other shadows. The hover one is the same cover, lifted. */ --shadow-book: 0 0 0 1px color-mix(in srgb, var(--edge) 12%, transparent), 1px 2px 3px color-mix(in srgb, var(--shade) 55%, transparent), 4px 12px 22px color-mix(in srgb, var(--shade) 48%, transparent), 10px 30px 52px color-mix(in srgb, var(--shade) 40%, transparent); --shadow-book-hover: 0 0 0 1px color-mix(in srgb, var(--edge) 22%, transparent), 2px 4px 6px color-mix(in srgb, var(--shade) 50%, transparent), 8px 22px 36px color-mix(in srgb, var(--shade) 48%, transparent), 16px 46px 80px color-mix(in srgb, var(--shade) 42%, transparent); } /* LIGHT, chosen with the toggle. Keep identical to the media block below (the gate compares them). */ :root[data-theme="light"] { color-scheme: light; --ground: #f4f1ea; --panel: #faf8f3; --raised: #ffffff; --line: #d9d4c7; --line-2: #b9b3a4; --ink: #17171a; --ink-2: #47443e; --ink-3: #5c5851; --focus: #7a5a0a; --focus-ink: #fff8e6; --zone: #1f5590; --zone-2: #163f6e; --stage-glow: #ffffff; --well: #ebe7dd; --logo: #8a6200; --edge: #ffffff; --shade: #2b2418; --shadow-plate: 0 1px 0 color-mix(in srgb, var(--edge) 90%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--shade) 8%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 14%, transparent), 3px 12px 28px color-mix(in srgb, var(--shade) 14%, transparent), 6px 30px 64px color-mix(in srgb, var(--shade) 12%, transparent); --shadow-lift: 0 1px 0 color-mix(in srgb, var(--edge) 90%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 13%, transparent), 3px 10px 24px color-mix(in srgb, var(--shade) 12%, transparent), 6px 28px 60px color-mix(in srgb, var(--shade) 10%, transparent); --shadow-key: 1px 1px 2px color-mix(in srgb, var(--shade) 22%, transparent); --shadow-book: 0 0 0 1px color-mix(in srgb, var(--shade) 16%, transparent), 1px 2px 3px color-mix(in srgb, var(--shade) 28%, transparent), 4px 12px 22px color-mix(in srgb, var(--shade) 22%, transparent), 10px 30px 52px color-mix(in srgb, var(--shade) 18%, transparent); --shadow-book-hover: 0 0 0 1px color-mix(in srgb, var(--shade) 24%, transparent), 2px 4px 6px color-mix(in srgb, var(--shade) 28%, transparent), 8px 22px 36px color-mix(in srgb, var(--shade) 24%, transparent), 16px 46px 80px color-mix(in srgb, var(--shade) 20%, transparent); } /* LIGHT, chosen by the device (no saved choice). Keep identical to the block above. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --ground: #f4f1ea; --panel: #faf8f3; --raised: #ffffff; --line: #d9d4c7; --line-2: #b9b3a4; --ink: #17171a; --ink-2: #47443e; --ink-3: #5c5851; --focus: #7a5a0a; --focus-ink: #fff8e6; --zone: #1f5590; --zone-2: #163f6e; --stage-glow: #ffffff; --well: #ebe7dd; --logo: #8a6200; --edge: #ffffff; --shade: #2b2418; --shadow-plate: 0 1px 0 color-mix(in srgb, var(--edge) 90%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--shade) 8%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 14%, transparent), 3px 12px 28px color-mix(in srgb, var(--shade) 14%, transparent), 6px 30px 64px color-mix(in srgb, var(--shade) 12%, transparent); --shadow-lift: 0 1px 0 color-mix(in srgb, var(--edge) 90%, transparent) inset, 1px 2px 3px color-mix(in srgb, var(--shade) 13%, transparent), 3px 10px 24px color-mix(in srgb, var(--shade) 12%, transparent), 6px 28px 60px color-mix(in srgb, var(--shade) 10%, transparent); --shadow-key: 1px 1px 2px color-mix(in srgb, var(--shade) 22%, transparent); --shadow-book: 0 0 0 1px color-mix(in srgb, var(--shade) 16%, transparent), 1px 2px 3px color-mix(in srgb, var(--shade) 28%, transparent), 4px 12px 22px color-mix(in srgb, var(--shade) 22%, transparent), 10px 30px 52px color-mix(in srgb, var(--shade) 18%, transparent); --shadow-book-hover: 0 0 0 1px color-mix(in srgb, var(--shade) 24%, transparent), 2px 4px 6px color-mix(in srgb, var(--shade) 28%, transparent), 8px 22px 36px color-mix(in srgb, var(--shade) 24%, transparent), 16px 46px 80px color-mix(in srgb, var(--shade) 20%, transparent); } }