/* ============================================================================ GESDA DESIGN SYSTEM — TOKENS v2.1 · design-system/designv2.1.md (approved 2026-09-02), §2–§8. The ONLY file in this build permitted to contain raw colour values. Every page loads this file first. No page defines its own :root block. Signal-layer tokens (§3.3) are omitted: this is a Class A page with no analytical figures. ========================================================================= */ :root { /* -- §3.1 Primitives · purple ramp (ratios against #FFFFFF) ------------ */ --purple-900: #27053D; /* 17.9:1 */ --purple-800: #420866; /* 14.4:1 — hover on 700 */ --purple-700: #530982; /* 12.1:1 — the action colour */ --purple-600: #5C0C8E; /* 11.1:1 */ --purple-300: #B570E0; /* 3.3:1 — never body text on light */ --purple-100: #DAB7EF; /* 1.8:1 — fills, muted text on dark */ --purple-050: #F7F2FD; /* 1.1:1 — tinted canvas, ink on dark */ --neutral-body: #333840; --neutral-muted: #5A5560; /* -- §3.2 Primitives · platform colours (strong on light, soft on dark) - */ --p1-violet: #440B47; --p1-violet-soft: #966993; --p2-blue: #00747D; --p2-blue-soft: #44AFCD; --p3-green: #008F7B; /* fails body-text contrast both ways */ --p3-green-soft: #98D0C5; --p3-green-deep: #006F5F; /* derived; the text-bearing green */ --p4-orange: #F39323; /* fill only on light; 7.7:1 on purple-900 */ --p4-yellow: #F9EA31; --p5-grey: #505050; --p5-grey-soft: #A2A2A2; /* -- §3.4 Semantics · light theme (the tier components reference) ------ */ --color-canvas: #FFFFFF; --color-canvas-tinted: var(--purple-050); --color-canvas-pressed: var(--purple-100); --color-ink: var(--purple-900); --color-body: var(--neutral-body); --color-muted: var(--neutral-muted); --color-hairline-on-light: rgba(39, 5, 61, 0.14); --color-hairline-soft-on-light: rgba(39, 5, 61, 0.07); --color-hairline: var(--color-hairline-on-light); --color-hairline-soft: var(--color-hairline-soft-on-light); --color-action-primary: var(--purple-700); --color-action-primary-hover: var(--purple-800); --color-action-primary-active: var(--purple-900); --color-on-action: #FFFFFF; --color-focus-ring: var(--purple-700); /* Fixed values that do not invert inside a coloured band */ --color-white: #FFFFFF; --color-scrim: rgba(39, 5, 61, 0.6); /* modal backdrop */ --color-scrim-strong: rgba(39, 5, 61, 0.9); /* lightbox backdrop */ --color-photo-wash: rgba(39, 5, 61, 0.25); /* §14.2 overlay on a poster */ --color-topbar: rgba(255, 255, 255, 0.92); --color-hairline-on-band: rgba(247, 242, 253, 0.22); --color-hairline-on-band-soft: rgba(247, 242, 253, 0.12); --color-wash-on-band: rgba(255, 255, 255, 0.10); --color-wash-on-band-strong: rgba(255, 255, 255, 0.18); /* -- §3.5 Status ------------------------------------------------------- */ --color-success: var(--p3-green-deep); --color-warning: #A85C08; /* darkened p4-orange; 5.0:1 with white */ --color-error: #B3122B; --color-info: var(--p2-blue); /* -- §3.7 Gradients · one per page, on the hero band ------------------- */ --gradient-signature: linear-gradient(135deg, var(--purple-700) 0%, var(--p3-green-deep) 100%); --gradient-mesh: radial-gradient(circle at 82% 12%, rgba(181, 112, 224, 0.45), transparent 42%), radial-gradient(circle at 70% 100%, rgba(0, 111, 95, 0.40), transparent 40%), linear-gradient(135deg, var(--purple-800) 0%, var(--purple-900) 100%); /* -- §4 Typography ----------------------------------------------------- */ --font-display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: var(--font-display); --font-accent: "Space Grotesk", "DM Sans", system-ui, sans-serif; --type-display: clamp(2.5rem, 5vw, 4rem); --type-h1: clamp(2rem, 3.5vw, 2.75rem); --type-h2: clamp(1.5rem, 2.5vw, 1.875rem); --type-h3: clamp(1.25rem, 1.8vw, 1.5rem); --type-h4: 1.125rem; --type-subhead: 1.125rem; --type-lead: 1.125rem; --type-body: 1rem; --type-body-sm: 0.875rem; --type-label: 0.875rem; --type-button: 1rem; --type-eyebrow: 0.6875rem; --type-data-label: 0.875rem; --type-caption: 0.8125rem; /* -- §5 Spacing · 4px base --------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-section: var(--space-12); /* mobile; scales below */ --layout-container-max: 1200px; --layout-container-narrow: 760px; --layout-topbar: 64px; /* 76px from tablet up */ /* -- §6 Shape ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --radius-full: 50%; /* -- §7 Elevation · purple-tinted, never neutral black ----------------- */ --shadow-sm-on-light: 0 2px 8px rgba(39, 5, 61, 0.06); --shadow-md-on-light: 0 8px 24px rgba(39, 5, 61, 0.10); --shadow-sm: var(--shadow-sm-on-light); --shadow-md: var(--shadow-md-on-light); --shadow-lg: 0 20px 50px rgba(39, 5, 61, 0.08); /* -- §8 Motion --------------------------------------------------------- */ --motion-fast: 160ms ease-out; --motion-medium: 260ms ease; --motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* §5.2 Section rhythm · §10.7 topbar */ @media (min-width: 768px) { :root { --space-section: var(--space-16); --layout-topbar: 76px; } } @media (min-width: 1024px) { :root { --space-section: var(--space-24); } } /* §8.3 Reduced motion. Mandatory, and on its own not sufficient: nothing on this page starts hidden or offset, so every element is already in its final state without motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }