/* ========================================================================== LEPTIR — Design tokens Themes are switched with Every colour in the site resolves through these variables. To retheme the entire website, edit one block below. Nothing else needs to change. ========================================================================== */ :root { /* ---- Type ------------------------------------------------------------ */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --step--2: clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem); --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.9375rem); --step-0: clamp(1.0625rem, 1.01rem + 0.28vw, 1.3125rem); --step-1: clamp(1.25rem, 1.14rem + 0.55vw, 1.75rem); --step-2: clamp(1.5rem, 1.28rem + 1.1vw, 2.5rem); --step-3: clamp(2rem, 1.6rem + 2vw, 4.5rem); --step-4: clamp(2.6rem, 1.85rem + 3.75vw, 6.875rem); --tracking-tight: -0.035em; --tracking-snug: -0.018em; --tracking-wide: 0.04em; /* ---- Space ----------------------------------------------------------- */ --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem; --sp-7: 7rem; --sp-8: 10rem; --measure: 62ch; --shell: 1240px; --gutter: clamp(1.25rem, 5vw, 4rem); --radius-sm: 3px; --radius: 6px; --radius-lg: 14px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 420ms; } /* ---- Theme: warm dark (default) ---------------------------------------- */ :root, [data-theme="warm"] { color-scheme: dark; --ink: #0A0908; --ink-raise: #131010; --veil: #1A1512; --line: #2A2320; --line-soft: #1F1A17; --bone: #F4F0E8; --ash: #9C9389; --ash-dim: #868078; --accent: #E39A4C; --accent-hi: #F6BE7C; --accent-deep:#B45A26; --signal: #8B7BE8; --core-hi: #FFF4E4; --glow-core: rgba(227, 154, 76, 0.30); --glow-far: rgba(180, 90, 38, 0.13); --on-accent: #14100C; --panel: rgba(255, 244, 232, 0.028); --panel-line: rgba(255, 232, 208, 0.10); --focus: #F6BE7C; } /* ---- Theme: cool dark --------------------------------------------------- */ [data-theme="cool"] { color-scheme: dark; --ink: #06090A; --ink-raise: #0D1315; --veil: #101A1B; --line: #1C2A2B; --line-soft: #16211F; --bone: #F1F5F4; --ash: #8B9A98; --ash-dim: #808F8D; --accent: #57C6B0; --accent-hi: #8FE0CE; --accent-deep:#1E7A6C; --signal: #9B8CF0; --core-hi: #EAFFFA; --glow-core: rgba(87, 198, 176, 0.26); --glow-far: rgba(30, 122, 108, 0.14); --on-accent: #04110F; --panel: rgba(232, 255, 250, 0.03); --panel-line: rgba(210, 245, 238, 0.11); --focus: #8FE0CE; } /* ---- Theme: light ------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --ink: #F7F5F0; --ink-raise: #FFFFFF; --veil: #EFEBE3; --line: #DED8CD; --line-soft: #E8E3DA; --bone: #14120F; --ash: #6C665D; --ash-dim: #635E56; --accent: #A85B18; --accent-hi: #8A4810; --accent-deep:#D9913F; --signal: #5B4BC4; --core-hi: #FFFBF5; --glow-core: rgba(168, 91, 24, 0.14); --glow-far: rgba(217, 145, 63, 0.10); --on-accent: #FFF8F0; --panel: rgba(20, 16, 12, 0.025); --panel-line: rgba(20, 16, 12, 0.10); --focus: #A85B18; }