/* ========================================================= Control IO — Design Tokens (defaults.css) Palette: Desert Dingo (burnt orange, tan/cream, brown) These variables are the single source of truth for colors, sizing, radii, shadows, and layout across the theme. ========================================================= */ :root{ /* ----- Brand core ----- */ --brand-burnt: #E17A30; /* primary accent */ --brand-tan: #FBE4C2; /* soft support */ --brand-brown: #3D2B1F; /* deep contrast */ /* ----- Base UI ----- */ --bg: #FAF3EA; /* page background */ --text: #2B2B2B; /* primary text */ --muted: #6B6B6B; /* secondary text */ /* ----- Shape & Depth ----- */ --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.08); /* ----- Layout ----- */ --container: 1280px; --cols-desktop: 4; /* ----- Accent system (derived from Desert Dingo) ----- */ --accent: var(--brand-burnt); /* #E17A30 */ --accent-2: color-mix(in srgb, var(--brand-burnt) 70%, var(--brand-brown) 30%); --accent-3: color-mix(in srgb, var(--brand-burnt) 55%, var(--brand-brown) 45%); /* hover/active */ --on-accent: #ffffff; /* ----- Surfaces & borders (auto-derive from bg/text) ----- */ --surface: #ffffff; --surface-2: #fafafa; --border: color-mix(in srgb, var(--text) 14%, var(--bg) 86%); /* subtle hairline */ } /* --------------------------------------------------------- Dark mode overrides (applies when ) --------------------------------------------------------- */ html.dark{ --bg: #111111; --text: #F2F2F2; --muted: #BDBDBD; /* Slightly deepen in dark for contrast */ --accent: color-mix(in srgb, var(--brand-burnt) 80%, #000 20%); --accent-2: color-mix(in srgb, var(--brand-brown) 60%, var(--brand-burnt) 40%); --on-accent: #ffffff; /* Surfaces & borders tuned for dark */ --surface: #151515; --surface-2: #1b1b1b; --border: color-mix(in srgb, var(--bg) 70%, #000 30%); } /* Optional: automatic dark mode if you ever want it @media (prefers-color-scheme: dark){ :root:not(.force-light){ color-scheme: dark; } } */