/* ECS v2.0 — Design Tokens
* Warm-residential (Sunrun / Magnolia / Patagonia)
* READ-ONLY in Phase 2. Do not edit per-page.
*/
:root {
/* ---------- Color: three-stop emerald + cream/sand + charcoal accent ----
* Brand language is constrained to THREE greens (forest / emerald / sage).
* The 500 and 300 stops alias to primary and sage respectively, so legacy
* component code resolves — but only 900 / 700 / 100 are canonical.
* See brand/ecs-brand.md §4 for the full spec.
* ---------------------------------------------------------------------- */
--c-emerald-900: #003D20; /* Forest — dark variant */
--c-emerald-700: #00713D; /* Emerald — PRIMARY brand */
--c-emerald-500: #00713D; /* alias → primary (retired as distinct stop) */
--c-emerald-300: #CFE2D9; /* alias → sage (retired as distinct stop) */
--c-emerald-100: #CFE2D9; /* Sage — light variant */
/* Neutral — cream/sand */
--c-cream-50: #fbf8f3; /* page background, warmest neutral */
--c-cream-100: #f4efe6; /* alt section background */
--c-cream-200: #e8e0d1; /* hairlines, dividers, card edges */
--c-sand-400: #b8a886; /* warm muted accent (use sparingly) */
/* Charcoal — single dark accent (chose charcoal over navy: warmer w/ cream) */
--c-ink-900: #1c1c1a; /* body copy on cream, max-contrast headlines */
--c-ink-700: #3a3a36; /* secondary body */
--c-ink-500: #6b6a63; /* muted, captions */
--c-ink-300: #a8a69d; /* placeholder, disabled */
/* Functional */
--c-white: #ffffff;
--c-error: #a8442b; /* warm rust, not red */
--c-success: var(--c-emerald-700);
/* Retired colors — present in logo only, NEVER in prominent UI:
* --c-legacy-amber: #f1a91e;
* --c-legacy-sky: #2da9df;
* Do not reference these in components.
*/
/* Semantic aliases used by components.css */
--bg-page: var(--c-cream-50);
--bg-alt: var(--c-cream-100);
--bg-card: var(--c-white);
--bg-emphasis: var(--c-emerald-900);
--bg-emphasis-soft: var(--c-emerald-100);
--fg-default: var(--c-ink-900);
--fg-muted: var(--c-ink-500);
--fg-on-emphasis: var(--c-cream-50);
--fg-brand: var(--c-emerald-700);
--border-soft: var(--c-cream-200);
--border-strong: var(--c-emerald-300);
--rule-hairline: 0.5px solid rgba(28, 28, 26, 0.18); /* brand spec .hairline-line */
/* ---------- Typography ---------- */
/* Display: Source Serif 4 (variable serif, editorial pairing per brand specimen)
* Body: Lato (humanist sans, warm, matches brand HTML specimen)
* Mono: JetBrains Mono (eyebrow labels, footer attribution)
* Loaded via Google Fonts in each page :
*
*
*
*/
--font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
--font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale — modular, 1.25 ratio anchored at 16px */
--fs-xs: 0.75rem; /* 12 */
--fs-sm: 0.875rem; /* 14 */
--fs-base: 1rem; /* 16 */
--fs-md: 1.125rem; /* 18 */
--fs-lg: 1.375rem; /* 22 */
--fs-xl: 1.75rem; /* 28 */
--fs-2xl: 2.25rem; /* 36 */
--fs-3xl: 3rem; /* 48 */
--fs-4xl: 4rem; /* 64 — editorial hero only */
--fs-5xl: 5.25rem; /* 84 — reserved, optional */
--lh-tight: 1.08;
--lh-snug: 1.25;
--lh-normal: 1.55;
--lh-relaxed: 1.7;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
--tracking-caps: 0.14em;
/* ---------- Spacing scale (4px base) ---------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 — section rhythm */
--space-10: 8rem; /* 128 — hero breathing */
/* ---------- Layout ---------- */
--container-max: 1200px;
--container-narrow: 760px; /* long-form reading */
--container-wide: 1440px; /* full-bleed-adjacent */
--gutter: clamp(1rem, 4vw, 2.5rem);
/* ---------- Breakpoints (use via @media (max-width: ...)) ----
* Canonical four-stop scale. Files should reference these values
* inline in @media queries — CSS can't interpolate vars in @media,
* so they live here as documentation + a single source of truth.
* --bp-sm: 640px — phones → small tablets
* --bp-md: 860px — tablet → small laptop
* --bp-lg: 1100px — laptop → desktop
* --bp-xl: 1400px — wide desktop
* --------------------------------------------------------------- */
--bp-sm: 640px;
--bp-md: 860px;
--bp-lg: 1100px;
--bp-xl: 1400px;
/* ---------- Grid (12-column primitive) ---------- */
--grid-cols: 12;
--grid-gap: clamp(1rem, 2.5vw, 2rem); /* column gap, fluid */
--grid-row-gap: clamp(1.5rem, 4vw, 3rem); /* row gap when wrapping */
/* ---------- Fluid section rhythm ----
* Compresses with viewport so sections don't eat 96px of padding
* on narrow screens while headlines clamp down.
* ------------------------------------ */
--space-section: clamp(3rem, 8vw, 6rem); /* default section padding */
--space-hero: clamp(4rem, 12vw, 8rem); /* hero / oversized rhythm */
/* ---------- Radii ---------- */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 24px;
--radius-pill: 999px;
/* ---------- Shadows — soft, warm, never blue ---------- */
--shadow-xs: 0 1px 2px rgba(28, 28, 26, 0.04);
--shadow-sm: 0 2px 8px rgba(28, 28, 26, 0.06);
--shadow-md: 0 8px 24px rgba(28, 28, 26, 0.08);
--shadow-lg: 0 18px 48px rgba(28, 28, 26, 0.12);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 140ms;
--dur-base: 240ms;
--dur-slow: 480ms;
--dur-hero: 900ms;
}
/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
--dur-hero: 0ms;
}
}