/* * LaunchPad design system tokens (D-071). The one place every colour, size, space, * radius and shadow is defined. Values marked [setting] are overridden inline from * LaunchPad → Branding; everything else derives from them. * * Rules * - Type: 6 sizes, 2 weights (400, 600). Sans for everything; the serif italic only * inside H1s and the footer CTA heading. * - Space: 4px grid. Use --lp-s-* only. * - Shape: radius sm (inputs, chips, photos), md (cards, panels), pill (buttons, tags). * - Elevation: subtle borders first; 3 shadow levels for lift, menus and photos. * - Breakpoints (not tokenisable in CSS): 640px and 1024px. * - Colour roles: primary teal (actions, links), accent green (fills behind dark text, * highlights on dark), one slate neutral ramp, status colours. Text ≥ 4.5:1. */ :root { /* ---- Colour: settings [setting] ---- */ --lp-green: #00B9B4; /* Primary (teal). Fills only; text uses --lp-primary-text. */ --lp-accent: #77B163; /* Accent (green). Fills behind dark text; large text on dark. */ --lp-ink: #1F2D33; /* Neutral 900: body text and headings. */ --lp-ink-deep: #2F4858; /* Neutral 700: the one dark surface. */ --lp-muted: #55646A; /* Neutral 500: secondary text. */ --lp-line: #DDE4E6; /* Neutral 200: borders and dividers. */ --lp-paper-2: #EEF2F3; /* Neutral 100: bands and panels. */ --lp-offwhite: #F6F8F9; /* Neutral 50: cards on the page. */ --lp-paper: #FFFFFF; /* Neutral 0: page. */ --lp-support: #61D0A9; /* Decorative only: list markers, icon tints. */ --lp-highlight: #009FBF; /* Decorative only: hover borders, active markers. */ /* ---- Colour: roles ---- */ --lp-primary: var(--lp-green); --lp-primary-text: color-mix(in srgb, var(--lp-green) 40%, var(--lp-ink)); /* links, labels on light: 6.8:1 */ --lp-primary-hover: color-mix(in srgb, var(--lp-green) 88%, var(--lp-ink)); /* button hover fill */ --lp-primary-tint: color-mix(in srgb, var(--lp-green) 12%, var(--lp-paper)); /* selected / icon circles */ --lp-on-primary: var(--lp-ink); /* label on teal: 5.8:1 */ --lp-accent-tint: color-mix(in srgb, var(--lp-accent) 18%, var(--lp-paper)); --lp-on-accent: var(--lp-ink); /* text on accent: 5.6:1 */ --lp-bg: var(--lp-paper); --lp-bg-alt: var(--lp-paper-2); --lp-card: var(--lp-offwhite); --lp-border: var(--lp-line); --lp-border-strong: color-mix(in srgb, var(--lp-muted) 55%, var(--lp-line)); --lp-text: var(--lp-ink); --lp-text-muted: var(--lp-muted); --lp-surface-dark: var(--lp-ink-deep); --lp-surface-footer: var(--lp-ink); /* one step darker than the dark surface, so the CTA panel above stands apart (D-073) */ --lp-on-dark: #FFFFFF; --lp-on-dark-muted: color-mix(in srgb, #FFFFFF 82%, var(--lp-ink-deep)); /* 8:1 on dark */ --lp-on-dark-line: color-mix(in srgb, #FFFFFF 16%, var(--lp-ink-deep)); /* Status */ --lp-success: #1E6B45; --lp-success-bg: #E6F4EC; --lp-warning: #7A5300; --lp-warning-bg: #FCF3DD; --lp-error: #B3261E; --lp-error-bg: #FBE9E7; --lp-focus: var(--lp-primary-text); /* ---- Type [setting: fonts] ---- */ --lp-font-heading: 'Hanken Grotesk', system-ui, sans-serif; --lp-font-sans: 'Hanken Grotesk', system-ui, sans-serif; --lp-font-serif: 'Instrument Serif', Georgia, serif; --lp-heading-weight: 600; --lp-weight-regular: 400; --lp-weight-bold: 600; /* 6 sizes */ --lp-fs-1: 14px; /* labels, meta, captions, small UI */ --lp-fs-2: 16px; /* body, buttons, inputs */ --lp-fs-3: 18px; /* lead text, card titles */ --lp-fs-4: 22px; /* H3, stat values */ --lp-fs-5: clamp(28px, 2.4vw + 16px, 36px); /* H2 */ --lp-fs-6: clamp(36px, 4vw + 20px, 56px); /* H1 */ --lp-lh-body: 1.5; --lp-lh-snug: 1.25; --lp-lh-heading: 1.15; --lp-lh-display: 1.1; --lp-track-heading: -0.015em; --lp-track-label: 0.06em; --lp-measure: 64ch; /* ---- Space: 4px grid ---- */ --lp-s-1: 4px; --lp-s-2: 8px; --lp-s-3: 12px; --lp-s-4: 16px; --lp-s-5: 24px; --lp-s-6: 32px; --lp-s-7: 48px; --lp-s-8: 64px; --lp-s-9: 96px; --lp-section-y: var(--lp-s-8); /* 96px from 1024px up */ --lp-tap: 44px; /* ---- Layout ---- */ --lp-max: 1200px; --lp-gutter: var(--lp-s-4); /* 24px from 640px, 32px from 1024px */ --lp-logo-height: 32px; /* [setting] */ /* ---- Shape [setting: corner style] ---- */ --lp-radius-sm: 8px; --lp-radius-md: 16px; --lp-radius-pill: 999px; /* ---- Elevation ---- */ --lp-shadow-1: 0 1px 2px color-mix(in srgb, var(--lp-ink) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--lp-ink) 6%, transparent); --lp-shadow-2: 0 8px 24px color-mix(in srgb, var(--lp-ink) 12%, transparent); --lp-shadow-3: 0 16px 40px color-mix(in srgb, var(--lp-ink) 20%, transparent); /* ---- Motion ---- */ --lp-ease: 0.15s ease; /* ---- Legacy aliases (pre-D-071 names, kept so every file resolves during migration) ---- */ --lp-white: #FFFFFF; --lp-green-text: var(--lp-primary-text); --lp-green-display: var(--lp-primary-text); --lp-green-surface: var(--lp-surface-dark); --lp-green-tint: var(--lp-primary-tint); --lp-green-on-dark: var(--lp-accent); --lp-on-brand: var(--lp-on-primary); --lp-support-tint: var(--lp-primary-tint); --lp-section-label: var(--lp-primary-text); --lp-ink-soft: var(--lp-text); --lp-nav-text: var(--lp-text); --lp-label: var(--lp-text-muted); --lp-on-dark-82: var(--lp-on-dark-muted); --lp-on-dark-65: var(--lp-on-dark-muted); --lp-on-dark-50: var(--lp-on-dark-muted); --lp-text-on-dark: var(--lp-on-dark-muted); --lp-fs-h1: var(--lp-fs-6); --lp-fs-h2: var(--lp-fs-5); --lp-fs-h3: var(--lp-fs-4); --lp-fs-body: var(--lp-fs-2); --lp-fs-small: var(--lp-fs-1); --lp-fs-eyebrow: var(--lp-fs-1); --lp-lh-tight: var(--lp-lh-display); --lp-track-tight: var(--lp-track-heading); --lp-track-eyebrow: var(--lp-track-label); --lp-gap: var(--lp-s-5); --lp-radius-lg: var(--lp-radius-md); --lp-radius-xl: var(--lp-radius-md); --lp-shadow-card: var(--lp-shadow-1); --lp-shadow-pop: var(--lp-shadow-3); --lp-shadow-photo: var(--lp-shadow-3); /* Logo mark follows the accent and primary (D-039). */ --lp-mark-light: color-mix(in srgb, var(--lp-accent) 30%, #fff); --lp-mark-mid: var(--lp-accent); --lp-mark-dark: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-green)); } @media (min-width: 640px) { :root { --lp-gutter: var(--lp-s-5); } } @media (min-width: 1024px) { :root { --lp-gutter: var(--lp-s-6); --lp-section-y: var(--lp-s-9); } }