/* LynxPrime design tokens (Claude Design system lynxprime-06f7272d), copied verbatim from colors_and_type.css. Fonts subset to Latin + the weights the landing page uses. */ @font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Inter-Regular.woff') format('woff'); } @font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Inter-SemiBold.woff') format('woff'); } @font-face { font-family: 'Darker Grotesque'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/DarkerGrotesque-SemiBold.woff') format('woff'); } @font-face { font-family: 'Darker Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/DarkerGrotesque-Bold.woff') format('woff'); } :root { /* ---- Brand palette (from Brand Guidelines 3.1) ---------- */ --lynx-gainsboro: #E1E3E5; /* primary surface light */ --lynx-charcoal: #323F50; /* primary ink / brand color */ --lynx-bone: #E3DCCE; /* warm cream — late-journey */ --lynx-rich-black:#111518; /* deep contrast */ /* Gainsboro scale (cool neutral) — 10-step grayscale */ --gainsboro-50: #FAFBFB; --gainsboro-100: #F5F6F6; --gainsboro-200: #F0F1F2; --gainsboro-300: #EBECEE; --gainsboro-400: #E1E3E5; /* = gainsboro */ --gainsboro-500: #CFD2D5; --gainsboro-600: #B5B9BD; --gainsboro-700: #9AA0A5; --gainsboro-800: #7C8288; --gainsboro-900: #5C6166; /* Charcoal scale (slate blue ink) — 10-step ramp */ --charcoal-50: #EEF0F3; --charcoal-100: #DCE0E6; --charcoal-200: #B9C0CA; --charcoal-300: #8A93A1; --charcoal-400: #6B7585; --charcoal-500: #545F6D; --charcoal-600: #3F4A5B; --charcoal-700: #323F50; /* = charcoal */ --charcoal-800: #232C3A; --charcoal-900: #181F2A; /* Bone scale (warm cream — for decision/reveal surfaces) — 10-step ramp */ --bone-50: #FAF8F2; --bone-100: #F5F1E9; --bone-200: #ECE8DE; --bone-300: #E8E2D6; --bone-400: #E3DCCE; /* = bone */ --bone-500: #D6CDB9; --bone-600: #B8AC92; --bone-700: #9A8E72; --bone-800: #786E57; --bone-900: #564E3D; /* Rich black scale */ --rich-100: #4A4E55; --rich-300: #2A2F36; --rich-500: #1A1E24; --rich-700: #111518; /* = rich black */ --rich-900: #08090B; /* ---- Accent · Aurora gold (used sparingly — premium impact) ---- */ --aurora: #F9C73E; /* base */ --aurora-l1: #E0C66B; --aurora-l2: #E9DEB8; --aurora-l3: #E9E3D3; --aurora-deep: #8F6F1B; /* derived: legible "gold" ink */ /* Aurora interaction states — default / hover / pressed (deepen + saturate) */ --aurora-hover: #EBB62B; --aurora-pressed: #D6A31C; --aurora-l1-hover: #D1B654; --aurora-l1-pressed: #BCA13E; --aurora-l2-hover: #DACDA1; --aurora-l2-pressed: #C7B98A; --aurora-l3-hover: #DBD4BF; --aurora-l3-pressed: #C9C1A9; /* legacy alias */ --lynx-gold: var(--aurora); --lynx-gold-soft: var(--aurora-l1); /* ---- Semantic colors ----------------------------------- */ /* Backgrounds — by journey phase */ --bg-clinical: #CCD1D6; /* early-journey: wizard, paywall, inputs (layers on paper) */ --bg-paper: var(--gainsboro-100); /* default app surface */ --bg-warm: var(--bone-400); /* late-journey: render, configurator reveal */ --bg-warm-soft: #F7F4ED; /* warm card on warm bg */ --bg-ink: var(--charcoal-700); /* hero, header, full-bleed sections */ --bg-ink-soft: #54627A; /* raised card on ink */ --bg-deep: var(--rich-700); /* photography, modal scrim, rare */ --bg-deep-soft: #2B313C; /* raised card on deep */ /* Frosted glass — the ONLY surface designed to sit over photography. Translucent + backdrop-blur so the image reads through. Pair the fill with --blur-frost on backdrop-filter and the matching hairline. */ --bg-frost: rgba(245, 246, 246, 0.24); /* light frost — over bright/mixed photos */ --bg-frost-line: rgba(255, 255, 255, 0.55); /* top-edge highlight for light frost */ --bg-frost-dark: rgba(24, 31, 42, 0.18); /* dark frost — over busy/bright photos, white text */ --bg-frost-dark-line: rgba(255, 255, 255, 0.14); /* hairline for dark frost */ --blur-frost: saturate(1.3) blur(18px); /* @kind other */ /* backdrop-filter recipe for both */ /* Foreground */ --fg-1: var(--rich-700); /* primary text */ --fg-2: var(--charcoal-700); /* default body on light */ --fg-3: var(--charcoal-500); /* secondary, captions */ --fg-4: var(--charcoal-400); /* tertiary, helper */ --fg-on-ink: #FFFFFF; /* text on charcoal */ --fg-on-ink-2: var(--gainsboro-300); /* secondary on charcoal */ --fg-on-warm: var(--charcoal-700); /* text on bone */ /* Lines & borders — hair-thin, the brand uses fine rules */ --line-1: rgba(50, 63, 80, 0.14); /* hairline on light */ --line-2: rgba(50, 63, 80, 0.28); /* divider */ --line-strong: var(--charcoal-700); --line-on-ink: rgba(255, 255, 255, 0.16); /* Success scale (brand green #1EA97C) — 10-step ramp, base @ 500 */ --success-50: #DEFCED; --success-100: #C7F4DF; --success-200: #9AE3C3; --success-300: #6BCEA5; --success-400: #44BA8E; --success-500: #1EA97C; /* = success base */ --success-600: #00885F; --success-700: #006D4B; --success-800: #005339; --success-900: #003A28; /* Error scale (brand red #E24C4C) — 10-step ramp, base @ 500 */ --error-50: #FFE7E2; --error-100: #FFD4CE; --error-200: #FFB0A9; --error-300: #FF8B84; --error-400: #FD6D69; --error-500: #E24C4C; /* = error base */ --error-600: #C4373A; --error-700: #9F2A2C; --error-800: #7A2122; --error-900: #561717; /* Status (kept restrained, on-brand) */ --status-success: var(--success-500); --status-warning: #C9A24B; --status-danger: var(--error-500); --status-info: var(--charcoal-500); /* ---- Type families ------------------------------------- */ --font-display: 'Darker Grotesque', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Type scale (Brand Guidelines §2.7 — exact values) --- H1 Heading: Darker Grotesque Semibold, 110px, 80% LH, -2% LS Subheading: Darker Grotesque Bold, 30px, 80% LH, +10% LS (caps eyebrow) Body: Inter Regular, 18px, 140% LH, -1% LS Button: Darker Grotesque Semibold, 20px, 80% LH, -2% LS ---------------------------------------------------------- */ --fs-h1: 110px; /* brand H1 */ --fs-h2: 72px; /* derived intermediate */ --fs-h3: 54px; /* derived */ --fs-h4: 40px; /* derived */ --fs-subhead: 30px; /* brand "Subheading" — caps + tracked */ --fs-h5: 24px; --fs-eyebrow: 14px; /* small uppercase label */ --fs-button: 20px; /* brand button */ --fs-body-lg: 20px; --fs-body: 18px; --fs-body-sm: 16px; --fs-caption: 13px; --fs-micro: 11px; --lh-tight: 0.8; /* @kind font */ /* display/heading line height */ --lh-snug: 1.1; /* @kind font */ --lh-body: 1.4; /* @kind font */ /* 140% */ --lh-loose: 1.6; /* @kind font */ --ls-display: -0.02em; /* -2% */ --ls-tight: -0.01em; --ls-normal: 0; /* @kind spacing */ --ls-eyebrow: 0.1em; /* +10% for caps */ /* ---- Spacing scale (4px grid, architectural) ----------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Padding aliases — the most-used steps, named by role */ --p1: var(--space-1); /* 4px */ --p2: var(--space-2); /* 8px */ --p3: var(--space-4); /* 16px */ --p4: var(--space-5); /* 24px */ /* Margin aliases — most-used steps, named by role */ --m1: var(--space-1); /* 4px */ --m2: var(--space-2); /* 8px */ --m3: var(--space-4); /* 16px */ --m4: var(--space-5); /* 24px */ /* ---- Layout grid — Laptop (≥1024px) --------------------- 12-column stretch grid. Columns are fluid (1fr) — no fixed column width — so they expand to fill the frame between the outer margins. Matches the Figma layout guide. Count 12 · Type Stretch · Width Auto Margin 24px · Gutter 16px The brand rule: the grid is *implied, not drawn* — column lines never show in production UI. The red overlay below is only the editor guide color. ------------------------------ */ --grid-columns: 12; /* @kind other */ --grid-margin: var(--space-5); /* 24px outer margin */ --grid-gap: var(--space-4); /* 16px gutter (gap) between columns */ --grid-overlay: rgba(255, 0, 0, 0.10); /* FF0000 @ 10% — editor guide only, never a UI fill */ /* ---- Radius — minimal, mostly square --------------------- */ /* Architecture is rectilinear. Round only when ergonomically required (pill buttons, avatars, status chips). */ --radius-0: 0; /* default — cards, surfaces */ --radius-1: 2px; /* form fields, tight nudge */ --radius-2: 4px; /* inline chips */ --radius-3: 8px; /* warm decision cards (late-journey) */ --radius-4: 16px; /* hero/reveal surfaces */ --radius-pill: 999px; /* buttons (optional), tags */ --radius-full: 50%; /* avatars */ /* Radius tokens (per spec image) */ --border-radius-sm: 0.25rem; /* 4px */ --border-radius: 0.375rem; /* 6px — default */ --border-radius-lg: 0.5rem; /* 8px */ --border-radius-xl: 1rem; /* 16px */ --border-radius-xxl: 2rem; /* 32px */ --border-radius-2xl: 2rem; /* 32px (alias of xxl) */ --border-radius-pill: 50rem; /* fully rounded */ /* ---- Elevation — low, never glossy ----------------------- */ /* The brand is matte. Shadows are soft and architectural, mostly suggesting paper resting on paper. */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(17, 21, 24, 0.04), 0 1px 2px rgba(17, 21, 24, 0.04); --shadow-2: 0 1px 0 rgba(17, 21, 24, 0.04), 0 4px 14px rgba(17, 21, 24, 0.06); --shadow-3: 0 2px 0 rgba(17, 21, 24, 0.04), 0 12px 32px rgba(17, 21, 24, 0.08); --shadow-warm: 0 2px 0 rgba(120, 90, 50, 0.05), 0 18px 40px rgba(120, 90, 50, 0.10); /* ---- Motion ---------------------------------------------- */ /* Calm, never bouncy. Standard easing is a gentle ease-out. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-1: 120ms; /* @kind other */ /* state changes (hover) */ --dur-2: 220ms; /* @kind other */ /* small UI transitions */ --dur-3: 380ms; /* @kind other */ /* panel/sheet */ --dur-4: 620ms; /* @kind other */ /* hero, reveals */ }