/* ===================================================================== * Design tokens — extracted from https://altnest.webflow.io/home-one * * Edit values in :root to rebrand the entire site. * Numbered tokens (--color-1, --color-2, …) are the raw extracted values. * Semantic aliases (--color-primary, --color-bg, …) point to numbers. * Dark mode overrides live in [data-theme="dark"] below. * * HOW TO REBRAND: * Just want a new primary color? Edit --color-1. * Want to remap which color is "primary"? Edit --color-primary. * See THEMING.md for full recipes. * =================================================================== */ :root { /* === COLORS (raw, ordered by frequency) === */ --color-1: #ffffff; /* used 2010× */ --color-2: #15151f; /* used 1095× */ --color-3: #0b2641; /* used 219× */ --color-4: #ff4006; /* used 219× */ --color-5: #ffe9ea; /* used 219× */ --color-6: #a37cff; /* used 219× */ --color-7: #0057ff; /* used 219× */ --color-8: #e6e6e6; /* used 219× */ /* === SEMANTIC ALIASES (edit these to remap roles) === */ --color-bg: var(--color-1); --color-text: var(--color-2); --color-primary: var(--color-7); --color-accent: var(--color-4); --color-surface: var(--color-5); --color-border: var(--color-8); --color-text-muted: var(--color-6); /* === TYPOGRAPHY === */ --font-heading: 'Geist', sans-serif; --font-body: 'Instrument Sans', sans-serif; /* Type scale — start small, grow as you need it */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* === SPACING SCALE === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* === RADIUS === */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-full: 9999px; /* Original site values for reference: */ --radius-orig-1: .375rem; /* used 38× */ --radius-orig-2: .3125rem; /* used 17× */ --radius-orig-3: 100%; /* used 11× */ --radius-orig-4: 0; /* used 7× */ --radius-orig-5: 50%; /* used 7× */ /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); /* Original site values for reference: */ --shadow-orig-1: 0 .25rem 3.75rem #0000001a; /* used 5× */ --shadow-orig-2: 0 8px 40px #0000001a; /* used 5× */ --shadow-orig-3: 0 2px 9px #0003; /* used 2× */ --shadow-orig-4: unset; /* used 1× */ --shadow-orig-5: 0 0 0 1px #0000001a, 0 1px 3px #0000001a; /* used 1× */ /* === MOTION === */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ===================================================================== * Dark mode * Activate by setting data-theme="dark" on . * By default, ONLY the style-guide page enables this. * To enable on live pages, add to your tag or a toggle button. * =================================================================== */ :root[data-theme="dark"] { --color-bg: #0f0f0f; --color-surface: #1a1a1a; --color-text: #f5f5f5; --color-text-muted: #a3a3a3; --color-border: #2a2a2a; } /* Respect system preference when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #0f0f0f; --color-surface: #1a1a1a; --color-text: #f5f5f5; --color-text-muted: #a3a3a3; --color-border: #2a2a2a; } }