/* Baby Despot App — design tokens Two skins (americana | sports), each light + dark via light-dark(). Skin: html[data-skin] — absent = "americana" (default), "sports", persisted as localStorage "despot-skin" Theme: html[data-theme] — absent = follow system, "light" / "dark" = manual, persisted as "despot-theme" Pre-paint script in must apply both attributes before the stylesheet loads. */ :root { color-scheme: light dark; /* ---- scales (skin-independent) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* one vertical-rhythm token: the gap between top-level blocks in a page */ --rhythm: var(--sp-6); --rhythm-tight: var(--sp-5); /* gap inside a group of related cards */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-pill: 999px; --dur-1: 120ms; --dur-2: 200ms; --dur-3: 350ms; --ease: cubic-bezier(.2, .7, .3, 1); --tabbar-h: 66px; --maxw: 1040px; --shadow-1: 0 4px 12px rgb(var(--shadow-ch) / .06); --shadow-2: 0 8px 22px rgb(var(--shadow-ch) / .09); --shadow-3: 0 16px 40px rgb(var(--shadow-ch) / .14); /* ---- Skin: Americana (default) — folk-sampler heritage quilt ---- Anchored on faded navy + barn red + muslin cream, gold stars. */ --bg: light-dark(#FBF6EA, #141B2E); --surface: light-dark(#FFFDF6, #1D2740); --surface-2: light-dark(#F1E7D0, #26324F); --ink: light-dark(#1E2A44, #F2E9D5); --ink-soft: light-dark(#5A6685, #B6BFD6); --accent: light-dark(#B23A34, #E06B5F); /* barn red */ --accent-deep: light-dark(#8E2B27, #C9524A); /* brick */ --support: light-dark(#6E8A5E, #8CA87A); /* folk sage */ --tender: light-dark(#D8A24A, #E6BE6A); /* weathered gold */ --danger: light-dark(#A8322B, #E0705F); --line: light-dark(rgba(30,42,68,.16), rgba(242,233,213,.16)); --shadow-ch: light-dark(30 42 68, 0 0 0); --on-accent: #FBF6EA; --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", "Palatino Linotype", Georgia, serif; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* canvas background palette, read by app.js via getComputedStyle */ --canvas-a: 216 162 74; /* weathered gold */ --canvas-b: 30 42 68; /* faded navy */ --canvas-mode: stars; /* paws | stars */ } html[data-skin="sports"] { /* ---- Skin: Vintage Sports — felt pennant / varsity / ballpark leather ---- Anchored on flannel cream + forest green + leather tan + vintage red. */ --bg: light-dark(#F3EFE2, #14201A); --surface: light-dark(#FCFAF2, #1C2C24); --surface-2: light-dark(#E7E0CC, #24382E); --ink: light-dark(#22352A, #EFE7D2); --ink-soft: light-dark(#566A5B, #AFC0B2); --accent: light-dark(#9C3327, #D9614F); /* vintage red */ --accent-deep: light-dark(#7E2820, #C24A3A); /* maroon */ --support: light-dark(#1E5A3A, #4E9E6E); /* field green */ --tender: light-dark(#C58A4E, #D6A467); /* leather tan */ --danger: light-dark(#98322A, #D9614F); --line: light-dark(rgba(34,53,42,.16), rgba(239,231,210,.16)); --shadow-ch: light-dark(34 53 42, 0 0 0); --on-accent: #F3EFE2; --font-display: "Oswald", "Bebas Neue", "Franklin Gothic Medium", "Arial Narrow", sans-serif; --canvas-a: 197 138 78; /* leather tan */ --canvas-b: 30 90 58; /* field green */ --canvas-mode: stars; } html[data-skin="broncos"] { /* ---- Skin: Boise State Broncos — blue + orange, the blue turf ---- Light = home whites w/ blue ink + orange; dark = the blue field. */ --bg: light-dark(#EEF1F8, #071A54); --surface: light-dark(#FFFFFF, #0E2568); --surface-2: light-dark(#DEE5F3, #16307C); --ink: light-dark(#12276B, #EFF3FF); --ink-soft: light-dark(#5566A0, #A9B7E0); --accent: light-dark(#D64309, #F1632B); /* Bronco orange */ --accent-deep: light-dark(#A8340A, #D64309); --support: light-dark(#0033A0, #4C6DD0); /* Boise blue */ --tender: light-dark(#F1632B, #F1632B); /* orange (star) */ --danger: light-dark(#C0392B, #E0705F); --line: light-dark(rgba(18,39,107,.16), rgba(239,243,255,.16)); --shadow-ch: light-dark(18 39 107, 0 0 0); --on-accent: #FFFFFF; --font-display: "Oswald", "Bebas Neue", "Franklin Gothic Medium", "Arial Narrow", sans-serif; --canvas-a: 214 67 9; /* orange */ --canvas-b: 0 51 160; /* Boise blue */ --canvas-mode: stars; } /* Manual theme override (absent attribute = follow system) */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Legacy aliases — keep for one release while old selectors are swept, then delete */ :root { --cream: var(--bg); --cream-2: var(--surface-2); --paper: var(--surface); --honey: var(--accent); --honey-deep: var(--accent-deep); --cocoa: var(--ink); --cocoa-soft: var(--ink-soft); --sage: var(--support); --blush: var(--tender); --card-edge: var(--line); --serif: var(--font-display); --sans: var(--font-body); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } @media print { :root { color-scheme: light; } }