/* ========================================================================== Design tokens - custom properties ONLY. No component rules in this file. Paired palette: "white-N" is ink for dark surfaces, "black-N" is ink for light surfaces; the two swap when the theme flips, which is what lets a single set of component rules serve both themes. Theme selector: data-theme="light" | "dark" on . Dark is default. ========================================================================== */ :root { /* ---- brand ---------------------------------------------------------- */ --primary: #DE7356; /* terracotta; replaces the reference green */ --primary-hover: #C85D40; /* pressed / hover darkening */ --primary-66: #DE735666; /* 40% alpha, used in the headline pill gradient */ --primary-strong: #C24E2F; /* "verified"-tier accent, reserved for later passes */ /* ---- neutrals (LIGHT theme values) ---------------------------------- */ --white: #fff; --white-8: #ffffff14; --white-36: #ffffff5c; --white-40: #ffffff66; /* NB: source is `#fff6` = 40% alpha, not 60% */ --white-56: #ffffff8f; --white-72: #ffffffb8; --white-92: #ffffffeb; --black: #000; --black-4: #0000000a; --black-6: #0000000f; --black-8: #00000014; --black-15: #00000026; --black-36: #0000005c; --black-40: #00000066; --black-50: #00000080; --black-56: #0000008f; --black-72: #000000b8; --surface: #f5f5f5; --bg: #ebebeb; --bg-2: #eaeaea; --bg-3: #0f0f0f; --dark: #0f0f0f; --success: #3dab25; --error: #f44336; /* ---- typography ----------------------------------------------------- */ --font-body: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Google Sans", system-ui, sans-serif; --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- elevation ------------------------------------------------------ */ --shadow: 0 0 0 1px #0000000f, 0 .5px .5px 0 #00000008, 0 1px 1px -.5px #00000008, 0 3px 3px -1.5px #00000008, 0 5px 5px -2.5px #00000008, 0 8px 8px -4px #00000008; --shadow-2: 0 .5px .5px 0 #00000008, 0 1px 1px -.5px #00000008, 0 3px 3px -1.5px #00000008, 0 5px 5px -2.5px #00000008, 0 8px 8px -4px #00000008; --shadow-4: 0 0 0 2px #0000000f, 0 2.09px 2.09px 0 #0000000f, 0 4.18px 4.18px -2.09px #0000000f, 0 12.53px 12.53px -6.26px #0000000f, 0 20.88px 20.88px -10.44px #0000000f, 0 33.4px 33.4px -16.7px #0000000f; /* the "glass" elevation used by every floating surface in dark mode */ --shadow-glass: 0 .5px .5px #0000000f, 0 1px 1px -.5px #0000000f, 0 3px 3px -1.5px #0000000f, 0 5px 5px -2.5px #0000001f, inset 0 .5px .5px #ffffff14, inset 0 1px 3px #ffffff08, inset 0 -4px 12px #ffffff0a; --glass-bg: linear-gradient(#ffffff14 0%, #ffffff0a 100%); /* ---- motion --------------------------------------------------------- */ --ease-out: cubic-bezier(.215, .61, .355, 1); /* easeOutCubic - matches GSAP power3.out */ --dur-fast: .3s; --dur-mid: .4s; --dur-slow: .5s; } /* DARK THEME - only the ink pairs and the page ground change. */ [data-theme="dark"] { --white-8: #00000014; --white-36: #0000005c; --white-40: #00000066; --white-56: #0000008f; --white-72: #000000b8; --white-92: #000000eb; --black-4: #ffffff0a; --black-6: #ffffff0f; --black-8: #ffffff14; --black-15: #ffffff26; --black-36: #ffffff5c; --black-40: #ffffff66; --black-50: #ffffff80; --black-56: #ffffff8f; --black-72: #ffffffb8; }