/* ===================================================================== Decatur Smiles v3 — Design Tokens --------------------------------------------------------------------- Single source of truth for the brand. Plain CSS custom properties (no build step) loaded in BEFORE the Tailwind output. Tailwind utilities and the inline component styles both resolve to these vars — re-theming the whole site = editing values here, zero markup/recompile. Architecture (mirrors the Prague design engine): 1. RAW palette (--ds-*) — tonal ramps (50→900) + anchor aliases. The ramps are the hex source; the anchor names (--ds-blue, --ds-navy, --ds-terracotta…) point INTO the ramps and are what themes override. 2. SEMANTIC roles (--color-* / --font-* / --radius-* / --shadow-*) — what components/utilities reference. Stable names. BRAND (locked 2026-06-13, ramps expanded 2026-06-13): light blue + white "calm clinical" lane — cool white grounds, clinical blue brand, navy ink/equity, terracotta warm accent. Status colors are theme-independent (success green, warning amber, danger red). A theme = re-point the raw layer under a scope (see dormant `[data-theme="warm"]` at the bottom). ===================================================================== */ :root, [data-theme="decatur"] { /* ── 1. RAW palette — tonal ramps ──────────────────────────────── */ /* Cool white grounds */ --ds-white: #FFFFFF; /* cards, top surfaces */ --ds-paper: #F7FAFD; /* page ground — barely-blue white */ --ds-mist: #EDF3FA; /* alt sections / subtle step */ --ds-sky-soft: #E3EEF8; /* soft tint — feature/quote bands */ --ds-sky: #D2E4F2; /* stronger sky fill — chips, tags */ /* Brand blue ramp (500 = brand · 700 = deep · 300 = soft) */ --ds-blue-50: #EEF5FB; --ds-blue-100: #D8E8F5; --ds-blue-200: #B3D0EA; --ds-blue-300: #9FC0DD; --ds-blue-400: #5B92C6; --ds-blue-500: #2F6FB3; --ds-blue-600: #285F9B; --ds-blue-700: #21507F; --ds-blue-800: #1B3F63; --ds-blue-900: #16314F; --ds-blue: var(--ds-blue-500); /* anchors — themes override these */ --ds-blue-deep: var(--ds-blue-700); --ds-blue-soft: var(--ds-blue-300); /* Navy — ink + dark surfaces (700 = ink · 900 = invert) */ --ds-navy-700: #264068; --ds-navy-800: #1F3457; --ds-navy-900: #1A2E4E; --ds-navy: var(--ds-navy-700); --ds-navy-deep: var(--ds-navy-900); /* Cool neutral (slate) — text, borders, dividers */ --ds-slate-900: #1E2A38; /* body ink */ --ds-slate-700: #3A4A63; /* ledes / secondary headings */ --ds-slate-500: #5B6B7A; /* muted captions */ --ds-slate-400: #8092A8; /* faint labels / placeholder */ --ds-slate-300: #C2CFDE; /* disabled / dividers */ --ds-slate-200: #DBE6F1; /* hairline border */ /* Terracotta accent ramp (500 = accent · 700 = deep) */ --ds-terracotta-100: #F4E2D8; --ds-terracotta-300: #E0A98C; --ds-terracotta-500: #C97B5A; --ds-terracotta-700: #A85F40; --ds-terracotta-900: #7E4226; /* Browner, muted terracotta — for accents on LIGHT grounds. The -500 reads too orange on cream/white; it stays the accent on DARK bands. */ --ds-terracotta-brown: #9B6443; --ds-terracotta: var(--ds-terracotta-500); --ds-terracotta-deep: var(--ds-terracotta-700); /* Warm neutral — the rare "warm beat" band */ --ds-sand: #EDE3D3; /* Functional / status — theme-independent */ --ds-green: #3F8F6B; --ds-green-soft: #E2F0EA; --ds-green-deep: #2C6B4F; --ds-amber: #C2872E; --ds-amber-soft: #F6E8CE; --ds-red: #B43E2C; --ds-red-soft: #F4DCD5; /* Text + shadow tint (anchors derive from the slate ramp) */ --ds-ink: var(--ds-slate-900); --ds-muted: var(--ds-slate-500); --ds-border: var(--ds-slate-200); --ds-shadow-rgb: 30, 58, 95; /* navy-blue shadow tint */ /* ── 2. SEMANTIC roles (reference these) ───────────────────────── */ /* Surfaces */ --color-bg-page: var(--ds-paper); --color-bg-alt: var(--ds-mist); --color-bg-card: var(--ds-white); --color-bg-tint: var(--ds-blue-50); /* faintest blue wash */ --color-bg-quote: var(--ds-sky-soft); /* soft tint bands */ --color-bg-sand: var(--ds-sand); /* the rare warm beat */ --color-bg-invert: var(--ds-navy-deep); /* dark sections / footer */ /* Ink / text */ --color-ink: var(--ds-navy); /* headings — equity */ --color-ink-body: var(--ds-ink); /* body copy */ --color-ink-subtle: var(--ds-slate-700); /* ledes / secondary */ --color-ink-muted: var(--ds-muted); /* captions */ --color-ink-invert: #EAF2FB; /* text on dark */ /* Brand + accent */ --color-brand: var(--ds-blue); --color-brand-deep: var(--ds-blue-deep); --color-brand-soft: var(--ds-blue-soft); --color-accent: var(--ds-terracotta-brown); /* browner on light; dark bands re-scope to -500 (orange) */ --color-accent-deep: var(--ds-terracotta-deep); --color-sky: var(--ds-sky); /* Functional / status (forms, callouts, indicators) */ --color-success: var(--ds-green); --color-success-soft: var(--ds-green-soft); --color-success-deep: var(--ds-green-deep); --color-warning: var(--ds-amber); --color-warning-soft: var(--ds-amber-soft); --color-danger: var(--ds-red); --color-danger-soft: var(--ds-red-soft); --color-info: var(--ds-blue); /* Lines */ --color-border: var(--ds-border); --color-border-strong: var(--ds-blue-soft); /* ── Type ──────────────────────────────────────────────────────── */ --font-display: 'Newsreader', Georgia, serif; --font-sans: 'Manrope', system-ui, -apple-system, sans-serif; /* ── Radius ────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ── Shadow (tint from the raw layer, so themes re-tint) ────────── */ --shadow-card: 0 2px 10px rgba(var(--ds-shadow-rgb), 0.07); --shadow-soft: 0 16px 48px rgba(var(--ds-shadow-rgb), 0.10); /* ── Type scale ────────────────────────────────────────────────── */ /* Fixed steps (text); fluid clamps for display. ~1.2 ratio. */ --text-xs: 0.8rem; /* eyebrows, tags, captions */ --text-sm: 0.9rem; /* small / meta */ --text-base: 1rem; /* base */ --text-md: 1.06rem; /* comfortable body / prose */ --text-body: 1.125rem; /* default paragraph / body copy (bare

, FAQ questions) */ --text-lg: 1.2rem; /* lede, large intro */ --text-xl: 1.4rem; /* h3, card titles */ --text-2xl: 1.7rem; /* small section heads */ --text-3xl: 1.9rem; /* prose h2 */ --text-h2: clamp(1.7rem, 3.4vw, 2.4rem); /* fluid section / band title */ --text-h1: clamp(2.2rem, 5vw, 3.4rem); /* fluid display / hero */ --leading-tight: 1.12; /* display */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; /* lede */ --leading-relaxed: 1.65; /* roomy body */ --leading-loose: 1.75; /* prose body */ --weight-light: 300; /* display serif */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* eyebrows / labels */ /* Typographic ROLES (body / body-sm / card-title / lede) live as real classes in sharedStyle() → "TYPOGRAPHIC ROLES" — one rule each, concrete values, no var indirection. Edit text styling there, not here. */ --tracking-tight: -0.01em; /* display */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; /* uppercase kickers */ /* ── Spacing scale (4px base) ──────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Layout widths ─────────────────────────────────────────────── */ /* The ONLY max-widths on the site. Every container picks one by role — never a bespoke number — so edges line up and nothing is "a bit wider than its neighbour for the hell of it". Three checkpoints: --w-read single reading column: prose, blog, default pages --w-content the standard content frame — the chrome AND page content: nav, footer, wide pages, bands, hero, grids, cards, photos. Everything normal lines up at this width. --w-wide BREAKOUT only: grids/tables that deliberately spill wider than the content frame (services pillar grids, wide tables). Nothing "chrome" uses this — that's what makes a breakout read as wider than the rest of the page. */ --w-read: 760px; --w-content: 960px; --w-wide: 1080px; } /* ===================================================================== THEME: "warm" — the original cream + forest + terracotta exploration. --------------------------------------------------------------------- DORMANT: not wired to any switcher (blue/white locked 2026-06-13). Overrides the anchor + surface tokens; the numeric ramp steps and the theme-independent status colors fall through from :root. Activate with . ===================================================================== */ [data-theme="warm"] { --ds-white: #FBF9F4; --ds-paper: #F5F1EA; --ds-mist: #EDE7DC; --ds-sky-soft: #E7EDE7; /* soft sage instead of sky */ --ds-sky: #D9C7A8; --ds-blue: #2E4A3F; /* brand anchor → forest green */ --ds-blue-deep: #20362E; --ds-blue-soft: #5C7A6E; --ds-navy: #264068; --ds-navy-deep: #20362E; /* dark sections → deep forest */ --ds-terracotta: #C97B5A; --ds-terracotta-deep: #A85F40; --ds-sand: #D9C7A8; --ds-ink: #1C2A24; --ds-muted: #5C6A60; --ds-border: #E0D8C9; --ds-shadow-rgb: 28, 42, 36; }