/* Design tokens — Landing / Spacing · Landing / Colors · Landing / Typography Values read from Figma file QBHnvwvUg3Gx0zwhvjMOsl: - Spacing / Color vars from node 11:48 (draft w/variables) - Button-Black, Button-L/M typography from production frames 200:3685 (Клод 1440) - Mobile type overrides confirmed from production frame 200:3996 (Клод 767) Google Fonts loaded in ; this file is pure custom properties. */ :root { /* ── Spacing — Desktop ─────────────────────────────── */ --spacing-section: 160px; --spacing-block: 64px; --spacing-group: 32px; --spacing-cards: 32px; /* gap between cards — does not shrink on mobile */ --spacing-element: 16px; --spacing-tight: 8px; /* does not shrink on mobile */ --spacing-gutter: 32px; /* ── Colors ─────────────────────────────────────────── */ --color-primary: #060c14; --color-secondary: #e6ebf2; --color-accent-1: #24c8e9; --color-accent-2: #6dc330; --color-accent-3: #fe589a; --color-accent-4: #efb72b; /* ── Opacity ───────────────────────────────────── */ --opacity-disabled: 0.4; /* ── Button colors — 6 variants × 4 props (bg/text/bg-hover/text-hover) ─ */ /* Key: Y = Accent-4, B = Primary, S = Secondary. First letter = Default BG; second letter = Hover BG (e.g. YS = Accent-4 default → Secondary hover). All resolved from docs/components.md; refactored to var() refs (no hex). */ --btn-yellow-bg: var(--color-accent-4); --btn-yellow-text: var(--color-primary); --btn-yellow-bg-hover: var(--color-primary); --btn-yellow-text-hover: var(--color-accent-4); --btn-black-bg: var(--color-primary); --btn-black-text: var(--color-accent-4); --btn-black-bg-hover: var(--color-accent-4); --btn-black-text-hover: var(--color-primary); --btn-ys-bg: var(--color-accent-4); --btn-ys-text: var(--color-primary); --btn-ys-bg-hover: var(--color-secondary); --btn-ys-text-hover: var(--color-primary); --btn-bs-bg: var(--color-primary); --btn-bs-text: var(--color-accent-4); --btn-bs-bg-hover: var(--color-secondary); --btn-bs-text-hover: var(--color-primary); --btn-sy-bg: var(--color-secondary); --btn-sy-text: var(--color-primary); --btn-sy-bg-hover: var(--color-accent-4); --btn-sy-text-hover: var(--color-primary); --btn-sb-bg: var(--color-secondary); --btn-sb-text: var(--color-primary); --btn-sb-bg-hover: var(--color-primary); --btn-sb-text-hover: var(--color-accent-4); /* ── Button geometry ─────────────────────────────────── */ --btn-radius: 8px; /* Size S: h=48 px=14 gap=8 icon=20 */ --btn-s-h: 48px; --btn-s-px: 14px; --btn-s-gap: 8px; --btn-icon-s: 20px; /* Size M: h=64 px=20 gap=10 icon=24 */ --btn-m-h: 64px; --btn-m-px: 20px; --btn-m-gap: 10px; --btn-icon-m: 24px; /* Size L: h=80 px=28 gap=12 icon=26 */ --btn-l-h: 80px; --btn-l-px: 28px; --btn-l-gap: 12px; --btn-icon-l: 26px; /* ── Input geometry (11) ─────────────────────────────── */ --input-radius: 8px; --input-border: 1px; --input-s-h: 48px; --input-s-px: 14px; --input-s-gap: 8px; --input-m-h: 64px; --input-m-px: 20px; --input-m-gap: 10px; --input-l-h: 80px; --input-l-px: 28px; --input-l-gap: 12px; /* ── Input typography (12) — IBM Plex Mono 700 ───────── */ /* label = small floated label (= supporting text size) · value = rest/typed text */ --input-s-label-size: 10px; --input-s-label-lh: 11px; --input-s-value-size: 14px; --input-s-value-lh: 20px; --input-m-label-size: 12px; --input-m-label-lh: 12px; --input-m-value-size: 16px; --input-m-value-lh: 24px; --input-l-label-size: 14px; --input-l-label-lh: 14px; --input-l-value-size: 18px; --input-l-value-lh: 26px; /* ── Input colors (8) ───────────────────────────────── */ --input-bg: var(--color-secondary); --input-text: var(--color-primary); --input-label-color: var(--color-primary); --input-border-default: var(--color-primary); --input-border-hover: var(--color-primary); --input-border-focus: var(--color-primary); --input-border-error: var(--color-accent-3); --input-support-error: var(--color-primary); /* ── Checkbox (10) ──────────────────────────────────── */ --cb-box: 20px; --cb-radius: 4px; --cb-border: 1px; --cb-icon: 14px; --cb-gap: var(--spacing-tight); /* 8px, constant */ --cb-border-color: var(--color-primary); --cb-bg-off: var(--color-secondary); --cb-bg-on: var(--color-primary); --cb-check: var(--color-accent-4); --cb-label-color: var(--color-primary); /* ── Typography ──────────────────────────────────────── */ --ff-display: 'Space Grotesk', sans-serif; --ff-mono: 'IBM Plex Mono', monospace; /* Display-Text · Space Grotesk 700 */ --t-display-size: 96px; --t-display-lh: 96px; --t-display-ls: -1.92px; /* Display-Mono · IBM Plex Mono 700 */ --t-display-mono-size: 96px; --t-display-mono-lh: 96px; --t-display-mono-ls: -1.92px; /* Heading-1 · Space Grotesk 700 */ --t-h1-size: 64px; --t-h1-lh: 68px; --t-h1-ls: -1.28px; /* Heading-2 · Space Grotesk 700 */ --t-h2-size: 32px; --t-h2-lh: 36px; --t-h2-ls: -0.32px; /* Body-L · Space Grotesk 400 */ --t-body-l-size: 24px; --t-body-l-lh: 32px; --t-body-l-ls: 0px; /* Body · Space Grotesk 400 */ --t-body-size: 18px; --t-body-lh: 26px; --t-body-ls: 0px; /* Button-S · IBM Plex Mono 700 */ --t-btn-s-size: 14px; --t-btn-s-lh: 20px; --t-btn-s-ls: 0px; /* Button-M · IBM Plex Mono 700 */ --t-btn-m-size: 16px; --t-btn-m-lh: 24px; --t-btn-m-ls: 0px; /* Button-L · IBM Plex Mono 700 */ --t-btn-l-size: 18px; --t-btn-l-lh: 26px; --t-btn-l-ls: 0px; /* Caption · IBM Plex Mono 400 */ --t-caption-size: 14px; --t-caption-lh: 20px; --t-caption-ls: 0px; /* Label · IBM Plex Mono 300 */ --t-label-size: 14px; --t-label-lh: 20px; --t-label-ls: 0px; } /* ── Mobile mode — spacing + typography overrides at ≤767px ── */ @media (max-width: 767px) { :root { /* Spacing */ --spacing-section: 64px; --spacing-block: 40px; --spacing-group: 16px; --spacing-element: 12px; --spacing-gutter: 16px; /* --spacing-cards: 32px — unchanged */ /* --spacing-tight: 8px — unchanged */ /* Display-Text mobile scale (confirmed from Клод 767 frame, node 200:4004) */ --t-display-size: 48px; --t-display-lh: 48px; --t-display-ls: -0.96px; /* Heading-1 mobile scale (Клод 767 frame, node 200:4014 — resolved via plugin API) */ --t-h1-size: 36px; --t-h1-lh: 40px; --t-h1-ls: -0.72px; /* Body-L mobile scale (confirmed from Клод 767 frame, node 200:4008) */ --t-body-l-size: 20px; --t-body-l-lh: 28px; /* Heading-2 mobile scale (Клод 767 frame, Point-Card mobile variant) */ --t-h2-size: 24px; --t-h2-lh: 28px; --t-h2-ls: -0.24px; /* Body mobile scale (Клод 767 frame, Point-Card mobile variant) */ --t-body-size: 16px; --t-body-lh: 24px; /* --t-body-ls: 0px — unchanged */ } }