/* ========================================================================== tokens.css — the ONLY place colors, type, spacing and motion are defined. Rebrand the whole site by editing this file. Nothing below this file should ever contain a raw hex value. Palette is taken from the Livewell tree mark (assets/livewell-tree.png): cream ground, olive-sage canopy, gold roots. ========================================================================== */ :root { /* ---------------------------------------------------------------- BRAND */ /* Swap these and the entire site re-skins. */ --grove: #22271C; /* darkest ground: nav, hero, contact */ --moss: #30362A; /* dashboard chrome / mid-dark ground */ --sage: #7D8060; /* the logo's canopy — icons, decoration */ --bark: #55594A; /* body text on light (6.73:1 on cream) */ --cream: #FAF7EF; /* page background */ --gold: #C9A04E; /* accent: CTAs, rules, emphasis */ --rust: #C4623F; /* ALERT STATES ONLY — never decorative */ /* --------------------------------------------------- DERIVED NEUTRALS */ --grove-900: #1A1E15; --moss-700: #292E23; /* chart inset */ --moss-500: #3A4131; --moss-300: #4B5340; --ink: #23271C; /* headings on light (14.2:1 on cream) */ --slate: #6A6E5C; /* secondary text (4.91:1 on cream) */ --stone: #E4E0D1; /* hairline borders on light */ --stone-soft: #F2EFE4; /* subtle fills on light */ --paper: #FFFEFA; /* card surface on light */ /* Sage family. --sage is 3.82:1 on cream: icons and fills only, never */ /* body text. */ --sage-soft: #E5E6D8; --sage-faint: #EFF0E6; /* Gold family. NOTE: --gold is a FILL and BORDER color on light grounds */ /* — never small text there. Use --gold-text for gold-colored copy. */ --gold-text: #836420; /* 5.15:1 on cream */ --gold-soft: #EFE3C4; --gold-faint: #F6EFDD; --gold-line: #DCC592; /* Rust family (alerts only). --rust-text for copy on light grounds. */ --rust-text: #A34E2F; /* 5.32:1 on cream */ --rust-lift: #E27C5E; /* 4.82:1 on the chart inset */ --rust-faint: #F7E7E0; /* ------------------------------------------------- TEXT ON DARK GROUND */ --on-dark: #FAF7EF; /* 11.63:1 on moss */ --on-dark-2: #B7BBA3; /* 6.31:1 on moss */ --on-dark-3: #8D927B; /* 3.87:1 on moss — decorative labels only */ --on-dark-line: #4A5240; --on-dark-line-2:#3A4131; /* ============================= DATA VISUALIZATION ===================== Categorical order below was validated with the dataviz validator (validate_palette.js --mode dark --surface #292E23, i.e. --moss-700, the inset every chart sits on): all five steps inside OKLCH L 0.48–0.67, chroma >= 0.1, worst adjacent CVD ΔE 12.2, worst adjacent normal-vision ΔE 17.0, every step >= 3:1 against the surface. ASSIGN IN ORDER, NEVER CYCLE. A 6th series folds into "Other" — it does not get a new hue. Only bar / stacked / line forms use this set (adjacent-pair gate); no scatter or bubble charts, which would need the stricter all-pairs gate. ==================================================================== */ --series-1: #B38D40; /* gold, stepped for the dark surface */ --series-2: #4A8AD6; /* blue */ --series-3: #2A9E78; /* green-teal */ --series-4: #8676D6; /* violet */ --series-5: #D25E88; /* rose */ /* Sequential / ordinal ramp — one hue, light to dark. Validated with */ /* --ordinal on the same surface: monotone L, ΔL >= 0.06, 7° hue spread. */ --ramp-1: #F1E2BD; --ramp-2: #DDBF7C; --ramp-3: #C39A4C; --ramp-4: #8E6F2E; /* Status — reserved. Always paired with an icon or a label, never colour alone. Ratios are against the --moss-700 chart inset. */ --status-good: #5FBF8C; /* 6.17:1 */ --status-warn: #C9A04E; /* 5.71:1 */ --status-critical: #E27C5E; /* 4.82:1 */ /* Chart furniture — deliberately recessive */ --grid-line: rgba(250, 247, 239, 0.09); --axis-line: rgba(250, 247, 239, 0.18); --chart-surface: var(--moss); --chart-inset: var(--moss-700); /* ------------------------------------------- TRANSLUCENT VARIANTS Alpha versions of the colours above. CSS cannot derive these from a var() without color-mix(), whose failure mode is a dropped declaration, so they are written out literally. If you change --grove, --gold, --on-dark or a status colour above, update its variants here too. */ --grove-a94: rgba(34, 39, 28, 0.94); /* sticky nav */ --grove-a98: rgba(34, 39, 28, 0.985); /* mobile drawer */ --grove-a28: rgba(34, 39, 28, 0.28); /* scrim behind the side panel */ --cream-a92: rgba(250, 247, 239, 0.92); /* sticky header on the landing page */ --shadow-a28: rgba(26, 30, 21, 0.28); --shadow-a50: rgba(26, 30, 21, 0.5); --shadow-a55: rgba(26, 30, 21, 0.55); --gold-a10: rgba(201, 160, 78, 0.10); --gold-a12: rgba(201, 160, 78, 0.12); --gold-a14: rgba(201, 160, 78, 0.14); --light-a03: rgba(250, 247, 239, 0.03); --light-a04: rgba(250, 247, 239, 0.04); --light-a05: rgba(250, 247, 239, 0.05); --light-a07: rgba(250, 247, 239, 0.07); --good-a12: rgba(95, 191, 140, 0.12); --crit-a14: rgba(226, 124, 94, 0.14); /* ------------------------------------------------------------ TYPE */ --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Fluid scale — min at 390px, max at 1440px */ --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem); --fs-h1: clamp(2.1rem, 1.45rem + 2.9vw, 3.35rem); --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem); --fs-h4: 1.0625rem; --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.28rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-micro: 0.6875rem; --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.62; --ls-eyebrow: 0.16em; --ls-tight: -0.02em; /* --------------------------------------------------------- SPACING */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --s9: 4rem; --s10: 5rem; --s11: 6.5rem; --s12: 8rem; --section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem); --container: 1200px; --container-narrow: 860px; --gutter: clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem); /* ------------------------------------------------- RADII & SHADOWS */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(34, 39, 28, 0.05), 0 1px 1px rgba(34, 39, 28, 0.04); --sh-md: 0 2px 6px rgba(34, 39, 28, 0.06), 0 8px 20px rgba(34, 39, 28, 0.05); --sh-lg: 0 4px 12px rgba(34, 39, 28, 0.07), 0 18px 44px rgba(34, 39, 28, 0.09); --sh-dark: 0 20px 60px rgba(26, 30, 21, 0.45); /* ---------------------------------------------------------- MOTION */ --dur-fast: 180ms; --dur: 280ms; --dur-slow: 440ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 72px; } /* One switch kills all motion. Every animated rule in this project must be written so that the reduced-motion branch below leaves it in FINAL state. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }