/* ============================================================================ Gathered — Marketing site tokens ---------------------------------------------------------------------------- White-background marketing surfaces. One brand hue, switchable live across five palettes (set [data-palette] on ); full light/dark parity ([data-theme="dark"] on ). Every text/UI pair is contrast-verified to Gathered's raised bars: ≥7:1 normal text, ≥4.5:1 large text & UI. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap'); :root { --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* spacing (4dp grid) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px; /* radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px; /* shadow — soft, tonal */ --shadow-1: 0 1px 2px rgba(40,28,16,.06), 0 1px 3px rgba(40,28,16,.05); --shadow-2: 0 6px 16px rgba(40,28,16,.08), 0 2px 6px rgba(40,28,16,.05); --shadow-3: 0 18px 40px rgba(40,28,16,.14), 0 6px 14px rgba(40,28,16,.08); --maxw: 1200px; /* ── DEFAULT PALETTE: Terracotta (light) ─────────────────────────────── */ --primary: #92350F; --on-primary: #FFFFFF; --soft: #FFDBC9; /* primary-container: soft chips, badges */ --on-soft: #3A1200; --tile: #FBD9BE; /* category-tile fill in mockups */ --on-tile: #2E1500; --surface: #FFFFFF; /* page */ --panel: #FBEFE7; /* tinted card / section band */ --panel-2: #FFFBF8; /* faint tint */ --ink: #221A12; /* headings + body */ --muted: #5A4636; /* secondary text */ --outline: #8A7059; --hero-grad-a: #FBEFE7; --hero-grad-b: #FFFBF8; } /* ── Honey ──────────────────────────────────────────────────────────────── */ :root[data-palette="honey"] { --primary:#7A4E12; --on-primary:#FFFFFF; --soft:#FFDEA8; --on-soft:#271900; --tile:#FCE7BC; --on-tile:#2A1D00; --surface:#FFFFFF; --panel:#F8F0E0; --panel-2:#FFFCF5; --ink:#211B10; --muted:#574A2E; --outline:#837553; --hero-grad-a:#F8F0E0; --hero-grad-b:#FFFCF5; } /* ── Sage (fresh warm green) ─────────────────────────────────────────────── */ :root[data-palette="sage"] { --primary:#415A2A; --on-primary:#FFFFFF; --soft:#CFE8B0; --on-soft:#142A00; --tile:#D6EBBA; --on-tile:#182800; --surface:#FFFFFF; --panel:#F0F3E9; --panel-2:#FCFDF8; --ink:#1B1F15; --muted:#49543C; --outline:#6F7A5E; --hero-grad-a:#F0F3E9; --hero-grad-b:#FCFDF8; } /* ── Mulberry ────────────────────────────────────────────────────────────── */ :root[data-palette="mulberry"] { --primary:#7E2A46; --on-primary:#FFFFFF; --soft:#FFD9E2; --on-soft:#3A0418; --tile:#FAD7E0; --on-tile:#33001A; --surface:#FFFFFF; --panel:#F8EEF0; --panel-2:#FFFBFC; --ink:#211318; --muted:#5A3F47; --outline:#8A6B73; --hero-grad-a:#F8EEF0; --hero-grad-b:#FFFBFC; } /* ── Forest (current brand) ──────────────────────────────────────────────── */ :root[data-palette="forest"] { --primary:#1D5C47; --on-primary:#FFFFFF; --soft:#9FDBC9; --on-soft:#001F14; --tile:#ACE5D0; --on-tile:#001B10; --surface:#FFFFFF; --panel:#EEF3F0; --panel-2:#F8FAF9; --ink:#101411; --muted:#3D5248; --outline:#6B7571; --hero-grad-a:#EEF3F0; --hero-grad-b:#F8FAF9; } /* ── Terracotta variations (LIGHT) — only when Terracotta palette is active. Classic is the default :root above, so it needs no override. ──────────── */ :root[data-palette="terracotta"][data-terra="sienna"] { --primary:#7C3A0E; --on-primary:#FFFFFF; --soft:#FFDDB8; --on-soft:#2B1700; --tile:#F3DBBE; --on-tile:#2B1700; --surface:#FFFCF6; --panel:#F6ECDD; --panel-2:#FFFCF6; --ink:#241B12; --muted:#5E4A34; --outline:#8C7253; --hero-grad-a:#F6ECDD; --hero-grad-b:#FFFCF6; } :root[data-palette="terracotta"][data-terra="coral"] { --primary:#9A2B14; --on-primary:#FFFFFF; --soft:#FFDAD0; --on-soft:#3E0B02; --tile:#FFD6C4; --on-tile:#33120A; --surface:#FFFCFB; --panel:#FBEDE9; --panel-2:#FFFCFB; --ink:#2A1612; --muted:#5E4039; --outline:#8E6A60; --hero-grad-a:#FBEDE9; --hero-grad-b:#FFFCFB; } :root[data-palette="terracotta"][data-terra="umber"] { --primary:#6B3710; --on-primary:#FFFFFF; --soft:#F8DBB0; --on-soft:#261500; --tile:#EAD4B8; --on-tile:#261500; --surface:#FFFCF7; --panel:#F2E8DA; --panel-2:#FFFCF7; --ink:#221A10; --muted:#574731; --outline:#897152; --hero-grad-a:#F2E8DA; --hero-grad-b:#FFFCF7; } :root[data-palette="terracotta"][data-terra="sandstone"] { --primary:#92350F; --on-primary:#FFFFFF; --soft:#FFDBC9; --on-soft:#3A1200; --tile:#F7D8B0; --on-tile:#2E1500; --surface:#FFFAF1; --panel:#F4E7D4; --panel-2:#FFFAF1; --ink:#251C12; --muted:#57442F; --outline:#8B7355; --hero-grad-a:#F4E7D4; --hero-grad-b:#FFFAF1; } /* ════════════════════════════ DARK PARITY ════════════════════════════════ */ :root[data-theme="dark"] { /* Terracotta dark */ --primary:#FFB68C; --on-primary:#4D1A00; --soft:#74300C; --on-soft:#FFDBC9; --tile:#5A2A12; --on-tile:#FFDBC9; --surface:#1A130D; --panel:#251B12; --panel-2:#221810; --ink:#F0E2D6; --muted:#D6BCA6; --outline:#A38B73; --hero-grad-a:#251B12; --hero-grad-b:#1A130D; } :root[data-theme="dark"][data-palette="honey"] { --primary:#EAC06A; --on-primary:#3F2E00; --soft:#5C4300; --on-soft:#FFDEA8; --tile:#4D3A12; --on-tile:#FFE8B8; --surface:#18140C; --panel:#231E12; --panel-2:#201B10; --ink:#EEE3D0; --muted:#D6C49C; --outline:#A4936B; --hero-grad-a:#231E12; --hero-grad-b:#18140C; } :root[data-theme="dark"][data-palette="sage"] { --primary:#B0D183; --on-primary:#1E3300; --soft:#2E4516; --on-soft:#CFE8B0; --tile:#354B1E; --on-tile:#D6EBBA; --surface:#12150D; --panel:#1C2014; --panel-2:#181C10; --ink:#E2E6D6; --muted:#C2CBAF; --outline:#8C9678; --hero-grad-a:#1C2014; --hero-grad-b:#12150D; } :root[data-theme="dark"][data-palette="mulberry"] { --primary:#FFB0C4; --on-primary:#54122A; --soft:#5E1834; --on-soft:#FFD9E2; --tile:#4D1528; --on-tile:#FFD9E2; --surface:#181014; --panel:#241519; --panel-2:#201217; --ink:#ECDCE0; --muted:#D8B5BE; --outline:#A6868E; --hero-grad-a:#241519; --hero-grad-b:#181014; } :root[data-theme="dark"][data-palette="forest"] { --primary:#6DCBA8; --on-primary:#001F16; --soft:#004D38; --on-soft:#9FDBC9; --tile:#003828; --on-tile:#ACE5D0; --surface:#0C1411; --panel:#1A2724; --panel-2:#0F1815; --ink:#E0E8E4; --muted:#A9C5BA; --outline:#8FACAA; --hero-grad-a:#1A2724; --hero-grad-b:#0C1411; } /* ── Terracotta variations (DARK) ────────────────────────────────────────── */ :root[data-theme="dark"][data-palette="terracotta"][data-terra="sienna"] { --primary:#F2B97A; --on-primary:#462800; --soft:#5E3D08; --on-soft:#FFDDB8; --tile:#553611; --on-tile:#FFDDB8; --surface:#1C150D; --panel:#271E12; --panel-2:#241B10; --ink:#EFE3D2; --muted:#D7C09E; --outline:#A48E6C; --hero-grad-a:#271E12; --hero-grad-b:#1C150D; } :root[data-theme="dark"][data-palette="terracotta"][data-terra="coral"] { --primary:#FFB4A0; --on-primary:#5B1804; --soft:#7B2410; --on-soft:#FFDAD0; --tile:#5A2114; --on-tile:#FFDAD0; --surface:#1E130F; --panel:#291B16; --panel-2:#261813; --ink:#F2E0DA; --muted:#DBBAB0; --outline:#A6877E; --hero-grad-a:#291B16; --hero-grad-b:#1E130F; } :root[data-theme="dark"][data-palette="terracotta"][data-terra="umber"] { --primary:#E8BB82; --on-primary:#3E2700; --soft:#523608; --on-soft:#F8DBB0; --tile:#4D3815; --on-tile:#F8DBB0; --surface:#1A1209; --panel:#241C10; --panel-2:#21190E; --ink:#EDE2CF; --muted:#D4C09B; --outline:#A28D69; --hero-grad-a:#241C10; --hero-grad-b:#1A1209; } :root[data-theme="dark"][data-palette="terracotta"][data-terra="sandstone"] { --primary:#FFB68C; --on-primary:#4D1A00; --soft:#74300C; --on-soft:#FFDBC9; --tile:#574017; --on-tile:#FFE6C9; --surface:#1C140C; --panel:#271D12; --panel-2:#241A10; --ink:#F0E3D2; --muted:#D8C19F; --outline:#A48D6B; --hero-grad-a:#271D12; --hero-grad-b:#1C140C; } /* derived */ :root { --line: color-mix(in srgb, var(--ink) 12%, transparent); --line-strong: color-mix(in srgb, var(--ink) 20%, transparent); --primary-hover: color-mix(in srgb, var(--primary) 88%, black); --on-surface-pill: color-mix(in srgb, var(--ink) 70%, transparent); }