/* ============================================================ keshin.work — Design Tokens ------------------------------------------------------------ Source of truth: Figma "26 keshin.work" color styles + text styles (variables panel). Every value here is named after its Figma token so the two stay diff-able: Figma CSS custom property ───────────────────────────── ───────────────────── 1. Blue - Primary/Blue-500:Brand --color-brand 1. Blue - Primary/blue-50 Light --color-brand-50 2. Gray - Neutral Color/10…80 --color-gray-10…80 Surface/Surface 10 · S 20 · White --surface-10 · -20 · -white Color/border --color-border Type - Light/Black - 500 --color-black-500 The display type scale (Bebas Neue) is responsive in Figma — three sets of text styles (Web / Tablet / Mobile). Components reference ONE variable (e.g. --text-d1) and the media queries at the bottom of this file swap the whole scale per breakpoint, exactly mirroring the D1-Web-112 → D1-Tablet-72 → D1-Mobile-56 style substitution the designs use. ============================================================ */ :root { /* ── Color/… ─────────────────────────────────────────────── */ --color-brand: #002FA7; /* 1. Blue - Primary/Blue-500 : Brand */ --color-brand-50: #E6EAF6; /* 1. Blue - Primary/blue-50 Light */ --color-gray-80: #1F2537; /* 2. Gray - Neutral Color/80 */ --color-gray-60: #4B5163; /* 2. Gray - Neutral Color/60 */ --color-gray-50: #6B7280; /* 2. Gray - Neutral Color/50 */ --color-gray-40: #9CA3AF; /* 2. Gray - Neutral Color/40 */ --color-gray-30: #D1D5DB; /* 2. Gray - Neutral Color/30 */ --color-gray-20: #E5E7EB; /* 2. Gray - Neutral Color/20 */ --color-gray-10: #F3F4F6; /* 2. Gray - Neutral Color/10 */ --surface-10: #F7F5F2; /* Surface/Surface 10 — page background */ --surface-20: #EBE7E1; /* Surface/S 20 — footer / cards */ --surface-white: #FFFFFF; /* Surface/White */ --color-border: #D1D5DB; /* Color/border — hairline grid lines */ --color-black-500: #2C2E30; /* Type - Light/Black - 500 (mouse icon)*/ /* Legacy aliases — older page styles (style.css) reference these. */ --color-dark: var(--color-gray-80); --color-muted: var(--color-gray-60); --color-primary: var(--color-brand); --color-primary-hover: #002177; /* ── Font stacks ─────────────────────────────────────────── */ --font-display: 'Bebas Neue', 'Bebas Fallback', 'Bebas Fallback 2', 'Arial Narrow', Helvetica, Arial, sans-serif; --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* ── Display scale (Bebas Neue) — Web set ────────────────── */ --text-d1: 112px; --lh-d1: 112px; --ls-d1: -0.4px; /* 1. Display/D1 */ --text-d2: 72px; --lh-d2: 72px; --ls-d2: 0.2px; /* 1. Display/D2 */ --text-d3: 56px; --lh-d3: 56px; --ls-d3: -0.4px; /* 1. Display/D3 */ --text-h3: 40px; --lh-h3: 40px; --ls-h3: 0.2px; /* 2. Heading/H3 */ --text-h4: 32px; --lh-h4: 32px; --ls-h4: 0.2px; /* 2. Heading/H4 */ --text-h5: 24px; --lh-h5: 24px; --ls-h5: 0.2px; /* 2. Heading/H5 */ --text-stat-label: 24px; --lh-stat-label: 24px; /* 5. Stat/Label */ --text-stat-num: 72px; --lh-stat-num: 72px; --ls-stat-num: 0.2px; /* 5. Stat/Number */ /* ── Body scale (Inter) — letter-spacing is % in Figma ───── */ /* 4. Body/XXL - 28/Medium (-3.25%) */ --text-body-xxl: 28px; --lh-body-xxl: 36px; --ls-body-xxl: -0.0325em; /* 4. Body/XL - 24/Medium (-3%) */ --text-body-xl: 24px; --lh-body-xl: 32px; --ls-body-xl: -0.03em; /* 4. Body/L - 20 (-2.5%) */ --text-body-l: 20px; --lh-body-l: 24px; --ls-body-l: -0.025em; /* 4. Body/M - 18 (-2%) */ --text-body-m: 18px; --lh-body-m: 28px; --ls-body-m: -0.02em; /* 4. Body/S - 15 (-1.25%) */ --text-body-s: 15px; --lh-body-s: 24px; --ls-body-s: -0.0125em; /* 3. Title/Title - 1 - 24 · Title - 2 - 20 (Semi Bold) */ --text-title-1: 24px; --lh-title-1: 28px; --ls-title-1: -0.03em; --text-title-2: 20px; --lh-title-2: 24px; --ls-title-2: -0.025em; /* Hairline/Hairline - 12 · 13 — Inter Bold, +6% tracking, uppercase */ --text-hairline-12: 12px; --text-hairline-13: 13px; --lh-hairline: 16px; --ls-hairline: 0.06em; /* Caption/XS - 12 */ --text-caption: 12px; --lh-caption: 16px; /* Menu/Semibold-32 (-3.5%) — footer quick links */ --text-menu: 32px; --lh-menu: 40px; --ls-menu: -0.035em; /* Chip/Semibold - 11 (+6%) — mobile footer legal lines */ --text-chip: 11px; --lh-chip: 16px; --ls-chip: 0.06em; /* ── Layout ──────────────────────────────────────────────── */ --page-gutter: 80px; --section-pad-b: 128px; } /* ── Tablet set (≤1024px — matches the 1024 Figma frame) ───── */ @media (max-width: 1024px) { :root { --text-d1: 72px; --lh-d1: 72px; --ls-d1: 0.2px; /* D1 - Tablet - 72 */ --text-d2: 56px; --lh-d2: 56px; --ls-d2: -0.4px; /* D2 - Tablet - 56 */ --text-d3: 40px; --lh-d3: 40px; --ls-d3: -0.12px; /* D3 - Tablet - 40 */ --text-h4: 24px; --lh-h4: 24px; --ls-h4: 0.3px; /* H4 - Tablet - 24 */ --text-stat-label: 20px; --lh-stat-label: 24px; /* Stat/Label - Tablet */ --text-body-xxl: 24px; --lh-body-xxl: 32px; --ls-body-xxl: -0.03em; /* → Body/XL */ --text-body-m: 15px; --lh-body-m: 24px; --ls-body-m: -0.0125em; /* → Body/S */ --page-gutter: 40px; --section-pad-b: 96px; } } /* ── Mobile set (≤767px — matches the 375 Figma frame) ─────── */ @media (max-width: 767px) { :root { --text-d1: 56px; --lh-d1: 56px; --ls-d1: 0; /* D1 - Mobile - 56 */ --text-d2: 40px; --lh-d2: 40px; --ls-d2: -0.12px; /* D2 - Mobile - 40 */ --text-d3: 40px; --lh-d3: 40px; --ls-d3: -0.12px; /* D3 - Mobile - 40 */ --text-h3: 24px; --lh-h3: 24px; --ls-h3: 0.2px; /* H3 - Mobile - 24 */ --text-h4: 24px; --lh-h4: 24px; --ls-h4: 0.2px; --text-stat-label: 16px; --lh-stat-label: 20px; /* Stat/Label - Mobile */ --text-stat-num: 56px; --lh-stat-num: 56px; --ls-stat-num: 0; /* Stat/Number - Mobile */ --text-body-xxl: 20px; --lh-body-xxl: 24px; --ls-body-xxl: -0.025em; /* → Body/L */ --page-gutter: 16px; --section-pad-b: 72px; } }