/* Bennett App v3 — design tokens Two skins (storybook | heirloom), each light + dark via light-dark(). Skin: html[data-skin] — "storybook" (default) or "heirloom", persisted as localStorage "bennett-skin" Theme: html[data-theme] — absent = follow system, "light" / "dark" = manual, persisted as "bennett-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; --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: Storybook Nursery (default) ---- */ --bg: light-dark(#FFF9EE, #241A12); --surface: light-dark(#FFFDF7, #2F2318); --surface-2: light-dark(#FBF3E2, #382B1D); --ink: light-dark(#4A3423, #F3E7D3); --ink-soft: light-dark(#7C6247, #C9B69B); --accent: light-dark(#E08A3C, #E8A45C); --accent-deep: light-dark(#B96A24, #C77F35); --support: light-dark(#8FA97C, #97AC85); /* meadow */ --tender: light-dark(#F2C7A8, #B97F63); /* blush */ --danger: light-dark(#C0563E, #D97A63); --line: light-dark(rgba(74,52,35,.16), rgba(243,231,211,.15)); --shadow-ch: light-dark(74 52 35, 0 0 0); --on-accent: #FFF9EE; --font-display: "Fraunces", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* canvas background palette, read by app.js via getComputedStyle */ --canvas-a: 224 138 60; /* marmalade */ --canvas-b: 143 169 124; /* meadow */ --canvas-mode: paws; /* paws | stars */ } html[data-skin="heirloom"] { --bg: light-dark(#F5F1E8, #10192E); --surface: light-dark(#FFFFFF, #1B2740); --surface-2: light-dark(#EDE8DB, #223154); --ink: light-dark(#232A3D, #EFE9DC); --ink-soft: light-dark(#5C6478, #9FA8C0); --accent: light-dark(#A5854A, #C9A867); /* brass */ --accent-deep: light-dark(#8A6D3B, #B08F52); --support: light-dark(#6E8A78, #8CA394); /* juniper */ --tender: light-dark(#A96E78, #C48B94); /* rose */ --danger: light-dark(#A85A48, #C97A66); --line: light-dark(rgba(35,42,61,.14), rgba(215,222,236,.16)); --shadow-ch: light-dark(35 42 61, 0 0 0); --on-accent: light-dark(#F5F1E8, #10192E); --font-display: "Cormorant", Didot, "Palatino Linotype", Georgia, serif; --canvas-a: 201 168 103; /* brass */ --canvas-b: 215 222 236; /* moon silver */ --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; } }