/* Forth* marketing — design tokens (Task #1042, Phase 1). * Single source of truth for the brand-family color, type, radius, * spacing, shadow, and motion tokens documented in * docs/marketing-redesign-plan.md §4 ("Brand-family token system"). * * Loaded on every marketing page (additive — defining variables alone * does not change any rendered styles). The tokens are consumed by the * v2 chassis partials (templates/partials/_header.html, * _hero.html, _sections.html) which only activate when ?v=2 is set. * * Per-brand accent is driven by the [data-brand] attribute on , * which routes/marketing.py sets from _get_host_domain(). Light/dark * mode is driven by [data-theme] on (defaults to light, follows * prefers-color-scheme via the marketing_base inline script, with a * manual toggle override). */ :root { /* Chassis (light, default) */ --ink: #0B1220; --surface: #FFFFFF; --surface-2: #F6F8FB; --line: #E2E8F0; /* Type */ --font-display: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 9999px; /* Motion */ --ease: cubic-bezier(0.25, 1, 0.5, 1); --dur: 280ms; /* Spacing scale (4px base, T-shirt named) */ --space-1: 4px; /* hairline gaps inside chips */ --space-2: 8px; /* icon ↔ label, badge padding-y */ --space-3: 12px; /* button padding-y, list-item gap */ --space-4: 16px; /* card inner padding (sm) */ --space-5: 24px; /* section sub-block gap */ --space-6: 32px; /* card inner padding (md), grid gap */ --space-7: 48px; /* hero stack gap */ --space-8: 64px; /* between sections (mobile) */ --space-9: 96px; /* between sections (desktop) */ --space-10: 128px; /* hero top-padding (desktop) */ /* Shadow scale (light) */ --shadow-xs: 0 1px 2px 0 rgba(11, 18, 32, 0.04); --shadow-sm: 0 1px 3px 0 rgba(11, 18, 32, 0.06), 0 1px 2px -1px rgba(11, 18, 32, 0.04); --shadow-md: 0 4px 12px -2px rgba(11, 18, 32, 0.08), 0 2px 4px -2px rgba(11, 18, 32, 0.04); --shadow-lg: 0 12px 32px -8px rgba(11, 18, 32, 0.12), 0 4px 8px -4px rgba(11, 18, 32, 0.06); --shadow-xl: 0 24px 56px -12px rgba(11, 18, 32, 0.18); --shadow-glow: 0 0 0 1px var(--brand-soft, rgba(79, 70, 229, 0.2)), 0 8px 24px -6px rgba(79, 70, 229, 0.25); /* Default brand fallback (Forthsuite indigo). Overridden per-host by the [data-brand] selectors below. */ --brand: #4F46E5; --brand-soft: #EEF0FF; } /* Dark theme — applied via [data-theme="dark"] on . The Forthsuite /custom upgrade page hard-codes data-theme="dark" to render the Direction D Premium-Enterprise variant; everything else is light by default and may flip via prefers-color-scheme + manual toggle. */ [data-theme="dark"] { --ink: #E6EDF5; --surface: #07090F; --surface-2: #11161F; --line: #1F2937; } /* Per-brand accent — canonical mapping from docs/marketing-redesign-plan.md §4. Note: this corrects the drift in templates/partials/part_of_forthsuite.html (#1043) where Forthclear and Forthsource were swapped. The values below are the source of truth going forward. */ [data-brand="forthsuite"] { --brand: #4F46E5; --brand-soft: #EEF0FF; } /* indigo */ [data-brand="forthcast"] { --brand: #2563EB; --brand-soft: #E6EEFF; } /* blue */ [data-brand="forthroute"] { --brand: #10B981; --brand-soft: #E6FBF3; } /* emerald */ [data-brand="forthmatch"] { --brand: #F59E0B; --brand-soft: #FFF6E0; } /* amber */ [data-brand="forthsource"] { --brand: #06B6D4; --brand-soft: #E0FAFF; } /* cyan */ [data-brand="forthclear"] { --brand: #8B5CF6; --brand-soft: #F1ECFF; } /* violet */