/* Denton Ranch - design tokens Eight skins, each light + dark via light-dark(). Denton House (DEFAULT, bare :root) - the real house palette, hand-designed Desert Ranch, Storybook, Heirloom, Woodland, Sun Devils, Broncos, Captain America - html[data-skin="..."], generated and contrast-corrected Theme: html[data-theme] - absent = follow system, "light"/"dark" = manual. Persisted as localStorage "denton-skin" / "denton-theme"; the pre-paint script in must apply both before this sheet loads or a dark device flashes light. Every text-on-background pair in both skins is contrast-checked - see the note above the Denton House block. Do not adjust a colour here without re-checking. */ :root { color-scheme: light dark; /* ---- scales ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --rhythm: var(--sp-6); --rhythm-tight: var(--sp-5); --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); --maxw: 720px; --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: DENTON HOUSE (default) --------------------------------------------------------- Taken from Heidi's confirmed finish schedule, locked 14 Aug 2026: Truffle maple cabinets #6B4A32 -> the ink family Natural HH01 plank floor #C9AE8C -> warm neutrals Shifting Sand carpet #C6B49A -> warm neutrals Zadar quartz counters #E8E6E1 -> the light grounds Modern Brushed Gold #B8945F -> the accent Matte / Midnight Black #1C1C1C -> the dark grounds Brushed nickel, aged bronze -> secondary metals The house rule is warm surfaces + gold + black, so this skin follows it: gold is the accent and black-brown is the counterweight. Bright chrome is deliberately absent - it is being removed from the house for the same reason it would fight this palette. NOTE ON GOLD: #B8945F is a mid-tone. White text on it is 2.8:1 and fails. It takes DARK text (5.9:1), which is also how gold hardware actually reads against truffle maple. --on-accent is dark here on purpose. ========================================================= */ --bg: light-dark(#F7F4EE, #17130F); --surface: light-dark(#FDFBF7, #221B15); --surface-2: light-dark(#EDE6DA, #2E251C); --ink: light-dark(#2A211A, #F1EBE0); --ink-soft: light-dark(#6B5B4B, #B5A791); --accent: light-dark(#B8945F, #C9A86B); /* brushed gold */ --accent-deep: light-dark(#8A6534, #D8BA82); /* the text-weight gold */ --support: light-dark(#6F5D43, #A89170); /* aged bronze */ --danger: light-dark(#A83226, #E0806C); --line: light-dark(#D9D0C0, #4A4038); --shadow-ch: light-dark(42 33 26, 0 0 0); --on-accent: light-dark(#241C15, #17130F); --font-display: "Fraunces", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --font-body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* ---- semantic status ---- */ --ok: var(--support); --warn: var(--accent-deep); --crit: var(--danger); /* ---- the two people ---- Gold and black, the house's own metal rule. They must differ in LUMINANCE, not merely hue, or the chips are indistinguishable at 32px and to a colourblind reader - hue alone was the first attempt and it failed. Each carries its own text colour because one shared --on-accent cannot be legible on both a near-black and a bright gold fill. */ --who-colby: light-dark(#2B2724, #3A3632); --who-colby-on: light-dark(#F7F4EE, #F1EBE0); --who-heidi: light-dark(#C9A86B, #D8BA82); --who-heidi-on: light-dark(#241C15, #17130F); --who-both: light-dark(#8A6534, #A88361); --who-both-on: light-dark(#FFFDF8, #17130F); } /* ========================================================= The other skins --------------------------------------------------------- Denton House above is hand-designed from the finish schedule and stays as authored. These seven are generated: six carried over from the Bennett app plus the original Desert Ranch, then contrast-corrected. Bennett's skins were never contrast-checked, and several failed as TEXT once they landed here - white on Storybook's orange button is 2.55:1, for instance. The identity of a skin lives in --bg / --ink / --accent, and those are untouched. Only tokens that carry TEXT were nudged, in lightness alone: --on-accent, --accent-deep, --ink-soft, --danger. The person-chips are solved per skin rather than hand-picked: Colby anchors on --ink, Heidi starts at --accent and is pushed away until the two separate by 3:1, and Both lands between them. Hue alone does not separate two chips at 32px, or for a colourblind reader - it has to be luminance. All 240 text pairs across all 8 skins pass WCAG AA in both light and dark. Regenerate rather than hand-edit: scratchpad solve.mjs + emit.mjs. ========================================================= */ /* ---- Desert Ranch ---- */ html[data-skin="desert"] { --bg: light-dark(#FAF5EC, #14110E); --surface: light-dark(#FFFDF8, #1E1A15); --surface-2: light-dark(#F0E7D6, #29231B); --ink: light-dark(#33291F, #F0E6D6); --ink-soft: light-dark(#6E5F4C, #B0A18E); --accent: light-dark(#BE6C36, #FFB45C); --accent-deep: light-dark(#98511F, #E09540); --support: light-dark(#6C7F58, #8FA37B); --danger: light-dark(#AE4530, #E07A5F); --on-accent: light-dark(#1E1812, #14110E); --line: light-dark(#DCD2C0, #3A332B); --shadow-ch: light-dark(51 41 31, 0 0 0); --who-colby: light-dark(#33291F, #F0E6D6); --who-colby-on: light-dark(#FAF5EC, #14110E); --who-heidi: light-dark(#BE6C36, #AD7A3F); --who-heidi-on: light-dark(#000000, #14110E); --who-both: light-dark(#5A6949, #99AB87); --who-both-on: light-dark(#FAF5EC, #14110E); } /* ---- Storybook ---- */ html[data-skin="storybook"] { --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(#A86021, #C77F35); --support: light-dark(#8FA97C, #97AC85); --danger: light-dark(#BE553D, #D97A63); --on-accent: light-dark(#473222, #241A12); --line: light-dark(rgba(74,52,35,.16), rgba(243,231,211,.15)); --shadow-ch: light-dark(74 52 35, 0 0 0); --who-colby: light-dark(#4A3423, #F3E7D3); --who-colby-on: light-dark(#FFF9EE, #241A12); --who-heidi: light-dark(#E08A3C, #AE7B45); --who-heidi-on: light-dark(#000000, #241A12); --who-both: light-dark(#708461, #98AD86); --who-both-on: light-dark(#000000, #241A12); } /* ---- Heirloom ---- */ 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); --accent-deep: light-dark(#866A39, #B08F52); --support: light-dark(#6E8A78, #8CA394); --danger: light-dark(#A85A48, #C97A66); --on-accent: light-dark(#1D2333, #10192E); --line: light-dark(rgba(35,42,61,.14), rgba(215,222,236,.16)); --shadow-ch: light-dark(35 42 61, 0 0 0); --who-colby: light-dark(#232A3D, #EFE9DC); --who-colby-on: light-dark(#F5F1E8, #10192E); --who-heidi: light-dark(#A5854A, #9B814F); --who-heidi-on: light-dark(#000000, #10192E); --who-both: light-dark(#5A7162, #95AA9D); --who-both-on: light-dark(#F5F1E8, #10192E); --font-display: "Cormorant", Didot, "Palatino Linotype", Georgia, serif; } /* ---- Woodland ---- */ html[data-skin="woodland"] { --bg: light-dark(#F3F4EC, #1A211A); --surface: light-dark(#FBFCF6, #232C22); --surface-2: light-dark(#E8EBDC, #2C382A); --ink: light-dark(#34402C, #E7EEDD); --ink-soft: light-dark(#606E53, #A7B79A); --accent: light-dark(#6F8A54, #9DB87E); --accent-deep: light-dark(#556E3E, #86A268); --support: light-dark(#B98A5E, #C89B6F); --danger: light-dark(#B15A44, #D07E68); --on-accent: light-dark(#161B12, #1A211A); --line: light-dark(rgba(52,64,44,.15), rgba(231,238,221,.15)); --shadow-ch: light-dark(52 64 44, 0 0 0); --who-colby: light-dark(#34402C, #E7EEDD); --who-colby-on: light-dark(#F3F4EC, #1A211A); --who-heidi: light-dark(#758F5B, #798E61); --who-heidi-on: light-dark(#000000, #1A211A); --who-both: light-dark(#C7A17E, #CBA076); --who-both-on: light-dark(#34402C, #1A211A); } /* ---- Sun Devils ---- */ html[data-skin="asu"] { --bg: light-dark(#FCF4F6, #2A0E18); --surface: light-dark(#FFFFFF, #3A1526); --surface-2: light-dark(#F5E3E9, #481D30); --ink: light-dark(#3A1020, #F7E9D0); --ink-soft: light-dark(#7A4A5A, #D8B79A); --accent: light-dark(#8C1D40, #FFC627); --accent-deep: light-dark(#6E1732, #E7B12A); --support: light-dark(#B8860B, #C0607F); --danger: light-dark(#C0392B, #E06A5A); --on-accent: light-dark(#FFF9EE, #2A0E18); --line: light-dark(rgba(58,16,32,.16), rgba(247,233,208,.16)); --shadow-ch: light-dark(58 16 32, 0 0 0); --who-colby: light-dark(#3A1020, #F7E9D0); --who-colby-on: light-dark(#FCF4F6, #2A0E18); --who-heidi: light-dark(#A54F6A, #A68119); --who-heidi-on: light-dark(#FCF4F6, #2A0E18); --who-both: light-dark(#B8860B, #9F5069); --who-both-on: light-dark(#3A1020, #F7E9D0); } /* ---- Broncos ---- */ html[data-skin="boise"] { --bg: light-dark(#F0F4FB, #0A1633); --surface: light-dark(#FFFFFF, #12224A); --surface-2: light-dark(#E0E8F5, #1A2C57); --ink: light-dark(#0A1A3A, #EAF0FA); --ink-soft: light-dark(#4A5B7A, #9FB2D6); --accent: light-dark(#0033A0, #F0562A); --accent-deep: light-dark(#002A80, #F26B3F); --support: light-dark(#D64309, #5B87D6); --danger: light-dark(#C0392B, #E06A5A); --on-accent: light-dark(#FFFFFF, #0A1633); --line: light-dark(rgba(10,26,58,.15), rgba(234,240,250,.16)); --shadow-ch: light-dark(10 26 58, 0 0 0); --who-colby: light-dark(#0A1A3A, #EAF0FA); --who-colby-on: light-dark(#F0F4FB, #0A1633); --who-heidi: light-dark(#3D64B7, #F0562A); --who-heidi-on: light-dark(#F0F4FB, #0A1633); --who-both: light-dark(#DC5D2B, #496CAB); --who-both-on: light-dark(#0A1A3A, #EAF0FA); } /* ---- Captain America ---- */ html[data-skin="cap"] { --bg: light-dark(#F4F6FB, #101A33); --surface: light-dark(#FFFFFF, #182444); --surface-2: light-dark(#E5EAF4, #21305A); --ink: light-dark(#14213E, #EAF0FA); --ink-soft: light-dark(#4C5A7A, #9DB0D8); --accent: light-dark(#B22234, #C2303F); --accent-deep: light-dark(#8E1B29, #E06576); --support: light-dark(#1B2A4A, #6E86C0); --danger: light-dark(#A8322A, #D9705E); --on-accent: light-dark(#FFFFFF, #FFFFFF); --line: light-dark(rgba(20,33,62,.15), rgba(234,240,250,.16)); --shadow-ch: light-dark(20 33 62, 0 0 0); --who-colby: light-dark(#14213E, #EAF0FA); --who-colby-on: light-dark(#F4F6FB, #101A33); --who-heidi: light-dark(#BC3F4E, #C2303F); --who-heidi-on: light-dark(#F4F6FB, #EAF0FA); --who-both: light-dark(#323F5C, #6E86C0); --who-both-on: light-dark(#F4F6FB, #101A33); } /* Manual theme override (absent attribute = follow system) */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } @media print { :root { color-scheme: light; } }