/* ============================================================ TENDI DESIGN TOKENS — shared source of truth Copied VERBATIM from design-package/moodboard.html (:root + [data-theme="dark"]). The mood board is the SOURCE OF TRUTH; this file lifts its token vocabulary so home.html and book-a-demo.html speak the exact same language. DO NOT introduce raw hexes / px / fonts in the pages — use these tokens only. Font families referenced below (Fraunces + Nunito Sans) are loaded via the same Google Fonts the mood board uses; each page links that + this file. ============================================================ */ /* ============================================================ TOKENS — primitive -> semantic -> component (EDIT THESE) Built in HSL; ramps step lightness while holding hue. 60 cream/paper · 30 navy ink + sage · 10 honey/terracotta accent. ============================================================ */ :root { /* --- primitive: CREAM / PAPER base (hue ~38, the warm storybook ground) --- */ --cream-50:#fffdf8; --cream-100:#fdf9f0; --cream-200:#fbf6ec; --cream-300:#f4ecdb; --cream-400:#e9dcc4; --cream-500:#dac9a8; --cream-600:#b9a47e; --cream-700:#8f7c58; --cream-800:#6a5b3f; --cream-900:#483d29; /* --- primitive: HONEY yellow ramp (the bus; hue ~42) --- */ --honey-50:#fef8e7; --honey-100:#fdeec1; --honey-200:#fbe093; --honey-300:#f8cf5e; --honey-400:#f4b740; --honey-500:#e09e1f; --honey-600:#b87d10; --honey-700:#8f5f0c; --honey-800:#6b470b; --honey-900:#4a3008; /* --- primitive: TERRACOTTA ramp (warm clay; hue ~16) --- */ --terra-50:#fbf0ea; --terra-100:#f6dccf; --terra-200:#eebda4; --terra-300:#e49b78; --terra-400:#d97a5a; --terra-500:#c45d3c; --terra-600:#a4492d; --terra-700:#833a25; --terra-800:#622c1d; --terra-900:#431f15; /* --- primitive: SAGE green ramp (calm planting; hue ~110) --- */ --sage-50:#f1f5ef; --sage-100:#dfe8da; --sage-200:#c3d3bb; --sage-300:#a4bd99; --sage-400:#8ba888; --sage-500:#6c8d6a; --sage-600:#547150; --sage-700:#42593f; --sage-800:#324230; --sage-900:#222d21; /* --- primitive: NAVY ink ramp (deep warm navy; hue ~214, slightly warm) --- */ --navy-50:#eef1f5; --navy-100:#d6dde6; --navy-200:#aab7c7; --navy-300:#7888a0; --navy-400:#4f6178; --navy-500:#36475c; --navy-600:#283749; --navy-700:#1e2a3a; --navy-800:#16202c; --navy-900:#0f1620; /* --- primitive: TEAL — the ONE "drop of software" hue (hue ~173). Reserved EXCLUSIVELY for UI shown INSIDE illustrated device screens. Never used in the brand chrome, buttons, links, or page surfaces. --- */ --screen-teal-50:#e7f7f4; --screen-teal-100:#c2ece5; --screen-teal-200:#8fdacf; --screen-teal-300:#54c4b5; --screen-teal-400:#2bb3a3; --screen-teal-500:#1d9686; --screen-teal-600:#16776a; --screen-teal-700:#125e54; --screen-teal-800:#0e4640; --screen-teal-900:#0a302c; /* --- primitive: feedback (warm-leaning, tuned to AA on their surfaces) --- */ --ok-600:#547150; /* sage-600 doubles as success (white text AA 5.4:1) */ --warn-500:#8f5f0c; /* honey-700 — deep enough for white text (AA 5.4:1) */ --err-600:#a4492d; /* terra-600 = warm error, not fire-engine red */ --info-600:#36475c; /* navy-500 = quiet info */ /* ============================================================ SEMANTIC (light theme — the HERO / primary theme: sunny storybook) Theming = repoint these. Components never reference primitives directly. ============================================================ */ --color-bg:var(--cream-200); /* warm paper ground */ --color-bg-tint:var(--cream-300); /* sunken/wash sections */ --color-surface:var(--cream-50); /* cards / panels (lifted paper) */ --color-surface-2:var(--cream-100); /* nested surface */ --color-text:var(--navy-700); /* deep warm navy ink */ --color-text-muted:var(--navy-500); /* secondary ink */ --color-text-subtle:var(--cream-800); /* captions on paper (AA 6.1:1) */ --color-border:var(--cream-400); /* hand-drawn paper edge */ --color-border-strong:var(--cream-500); --color-primary:var(--terra-600); /* CTA fill — warm clay, white text AA */ --color-primary-hover:var(--terra-700); --color-on-primary:#fffdf8; --color-secondary:var(--navy-700); /* ink button */ --color-secondary-hover:var(--navy-800); --color-on-secondary:#fffdf8; --color-accent:var(--honey-400); /* the BUS / sunshine highlight */ --color-on-accent:var(--navy-700); /* navy on honey (honey too light for white) */ --color-accent-sage:var(--sage-600); /* sage-600 carries white text at AA */ --color-link:var(--terra-700); --color-focus:var(--terra-600); --color-success:var(--ok-600); --color-warning:var(--warn-500); --color-error:var(--err-600); --color-info:var(--info-600); --color-on-feedback:#fffdf8; /* ink that sits on a feedback FILL (flips per theme) */ /* the drop-of-software accent — exposed as a token, never wired into chrome */ --color-screen-ui:var(--screen-teal-400); --color-screen-ui-ink:var(--screen-teal-700); /* --- type --- */ --font-display:"Fraunces", Georgia, "Times New Roman", serif; /* warm, bookish display */ --font-sans:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-yiddish:"Frank Ruhl Libre", "Noto Sans Hebrew", "David", serif; /* reserved companion */ /* NO --font-mono. Monospace is banned brand-wide. */ --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.563rem; --text-2xl:1.953rem; --text-3xl:2.441rem; --text-4xl:3.052rem; --text-5xl:3.815rem; /* 1.25 major-third scale */ --leading-tight:1.12; --leading-snug:1.3; --leading-normal:1.55; --tracking-display:-.015em; /* --- radius: soft, hand-finished edges (nothing sharp) --- */ --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-full:9999px; /* --- elevation: warm golden indoor light, never cold grey/black --- */ --shadow-sm:0 1px 2px rgba(74,48,8,.10); --shadow-md:0 6px 16px rgba(74,48,8,.12), 0 2px 4px rgba(74,48,8,.08); --shadow-lg:0 16px 36px rgba(74,48,8,.16), 0 4px 10px rgba(74,48,8,.08); --shadow-xl:0 28px 64px rgba(74,48,8,.20), 0 8px 18px rgba(74,48,8,.10); --glow-honey:0 0 0 4px rgba(244,183,64,.35); /* the warm "room glows" cue */ /* --- spacing (8pt scale, 4 half-step) --- */ --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; } /* ============================================================ DARK THEME — a tasteful cozy "evening daycare" variant (NOT the hero). Warm dark ground (never pure black / cold #121212); elevation by lightening warm surfaces; accents desaturated ~10-20%; ink ~#ECE4D6. ============================================================ */ [data-theme="dark"] { --color-bg:#241d16; /* warm dark brown-navy, not black */ --color-bg-tint:#2c2419; --color-surface:#322a20; /* lifted = lighter warm surface */ --color-surface-2:#3c3326; --color-text:#f1e9da; /* warm off-white ink */ --color-text-muted:#cdbfa6; --color-text-subtle:#a8997e; --color-border:#473c2c; --color-border-strong:#5a4d38; --color-primary:var(--terra-400); --color-primary-hover:var(--terra-300); --color-on-primary:#2a160d; --color-secondary:var(--cream-200); --color-secondary-hover:var(--cream-100); --color-on-secondary:#241d16; --color-accent:var(--honey-300); --color-on-accent:#3a2705; --color-accent-sage:var(--sage-300); --color-link:var(--honey-300); --color-focus:var(--honey-300); --color-success:var(--sage-300); --color-warning:var(--honey-300); --color-error:var(--terra-300); --color-info:var(--navy-200); --color-on-feedback:#241d16; /* dark ink on light feedback fills in evening mode */ --color-screen-ui:var(--screen-teal-300); --color-screen-ui-ink:var(--screen-teal-200); --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 16px 36px rgba(0,0,0,.55); --shadow-xl:0 28px 64px rgba(0,0,0,.6); --glow-honey:0 0 0 4px rgba(248,207,94,.30); }