/* ============================================================= ATOL DESIGN SYSTEM — canonical tokens Extracted from Atol Desing System.pen (v2.10). Variables (55), typography scale, spacing, semantic tokens. ============================================================= */ /* ----------------------------------------------------------------- FONT FACES ----------------------------------------------------------------- */ @font-face { font-family: 'Satoshi Variable'; font-weight: 300 900; font-style: normal; font-display: swap; src: url('./fonts/Satoshi-Variable.ttf') format('truetype-variations'), url('./fonts/Satoshi-Variable.ttf') format('truetype'); } /* Inter + JetBrains Mono come from Google Fonts — import in : */ :root { /* ---- ATOL BLUE (primary accent · step 600) ---- */ --atol-50: #edeefc; --atol-100: #d9dcf7; --atol-200: #bac0ef; --atol-300: #8e97e5; --atol-400: #616ed8; --atol-500: #3a4bd1; --atol-600: #1a2ed1; /* canonical brand hue */ --atol-700: #1627ad; --atol-800: #111d84; --atol-900: #0c1560; --atol-950: #080e3f; /* ---- LIME / SECONDARY accent (step 300) ---- */ --lime-50: #f8ffe0; --lime-100: #f3ffcc; --lime-200: #e8ff99; --lime-300: #e0ff70; /* canonical secondary */ --lime-400: #d4f250; --lime-500: #c8e630; --lime-600: #a8c210; --lime-700: #88a000; --lime-800: #687a00; --lime-900: #4a5800; --lime-950: #2e3800; /* ---- SEMANTIC COLOR — ACCENT (Atol Blue) ---- */ --accent: var(--atol-600); /* #1a2ed1 */ --accent-hover: var(--atol-700); /* #1627ad */ --accent-active: var(--atol-800); /* #111d84 */ --accent-light: var(--atol-50); /* #edeefc */ --accent-muted: var(--atol-300); /* #8e97e5 */ --accent-text: #FFFFFF; /* ---- SEMANTIC COLOR — SECONDARY (Lime) ---- */ --secondary: var(--lime-300); /* #e0ff70 */ --secondary-light: var(--lime-100); /* #f3ffcc */ --secondary-muted: var(--lime-500); /* #c8e630 */ --secondary-text: #0A0A0A; /* ---- THEME NEUTRALS (default / "Mist") ---- Default surface is the soft blue-gray paper (#E8EFEF). Use [data-theme="light"] for pure white or [data-theme="cool"] for warm off-white. */ --bg: #E8EFEF; --surface: #DCE5E5; --brutal-gray: #CCD5D5; --border: #B0BABA; --hairline: #EEEEEE; --shadow: #000000; /* ---- TEXT ---- */ --text-primary: #0A0A0A; --text-secondary: #666666; /* ---- TYPOGRAPHY ---- */ --font-heading: 'Satoshi Variable', Satoshi, system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-primary: var(--font-body); /* alias used in source */ --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Exact type scale from the .pen's "Typography Scale" artboard. Base 20px · Ratio 1.333 (Perfect Fourth). */ --fs-display: 120px; /* Satoshi 400/500 · -3% · LH 0.85 */ --fs-h1: 72px; /* Satoshi 500 · -2% · LH 0.90 */ --fs-h2: 56px; /* Satoshi 400/500 · -2% · LH 0.90 */ --fs-h3: 42px; /* Satoshi 400 · -1% · LH 0.95 */ --fs-h4: 28px; /* Satoshi 400 · -1% · LH 1.20 (Subhead) */ --fs-body-lg: 20px; /* Inter 400 · -0.5%· LH 1.50 */ --fs-body: 18px; /* Inter 400 · -0.5%· LH 1.60 (UI body, hero sub) */ --fs-body-sm: 15px; /* Inter 400 · -0.5%· LH 1.60 (feature body) */ --fs-caption: 14px; /* Inter 400/500 · +1% · LH 1.50 */ --fs-small: 12px; --fs-micro: 11px; /* utilitarian labels, tabular numbering */ /* Tracking */ --tr-display: -0.03em; --tr-h1: -0.02em; --tr-h2: -0.02em; --tr-h3: -0.01em; --tr-h4: -0.01em; --tr-body: -0.005em; --tr-caption: 0.01em; --tr-label: 0.08em; /* ALL-CAPS utilitarian labels */ /* Line-heights */ --lh-display: 0.85; --lh-h1: 0.90; --lh-h2: 0.90; --lh-h3: 0.95; --lh-h4: 1.20; --lh-body: 1.50; --lh-body-lg: 1.60; /* ---- SPACING (8px baseline, exact values from .pen) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 120px; --space-10:160px; /* ---- STRUCTURE ---- */ --radius-pill: 9999px; /* buttons, pills, avatars */ --radius-none: 0; /* sections, cards, inputs */ --stroke-hairline: 1px solid var(--hairline); --stroke-structural:1px solid var(--border); --max-width: 1440px; --gutter: 24px; /* ---- ELEVATION (hard shadow system, optional) ---- */ --shadow-hard: 4px 4px 0 var(--shadow); --shadow-hard-hover: 8px 8px 0 var(--shadow); /* ---- MOTION ---- */ --dur-fast: 150ms; --dur-norm: 250ms; --dur-slow: 400ms; --ease-std: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- THEME: Light — pure white paper, black structural border ---- */ [data-theme="light"] { --bg: #FFFFFF; --surface: #F5F5F5; --brutal-gray: #E5E5E5; --border: #1A1A1A; } /* ---- THEME: Cool — warm off-white paper ---- */ [data-theme="cool"] { --bg: #F7F7F5; --surface: #DCE5E5; --brutal-gray: #CCD5D5; --border: #B0BABA; } /* ----------------------------------------------------------------- SEMANTIC TYPOGRAPHY CLASSES (match .pen token names exactly) ----------------------------------------------------------------- */ html, body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display, h1.display { font-family: var(--font-heading); font-size: var(--fs-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--tr-display); } h1, .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-h1); letter-spacing: var(--tr-h1); margin: 0; } h2, .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); margin: 0; } h3, .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-h3); letter-spacing: var(--tr-h3); margin: 0; } h4, .subhead { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 400; line-height: var(--lh-h4); letter-spacing: var(--tr-h4); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body-lg); letter-spacing: var(--tr-body); } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-lg); } .caption { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 400; line-height: 1.5; letter-spacing: var(--tr-caption); color: var(--text-secondary); } .label { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; line-height: 1.4; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-secondary); } code, .mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; } /* Utilitarian numbering (default list anchor in Atol — e.g. "01/") */ .utilitarian-num { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--tr-h2); color: #D0D0D0; /* soft gray — scannable, not shouty */ font-variant-numeric: tabular-nums; } /* Standard reset helpers */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, svg { display: block; max-width: 100%; } a { color: inherit; } /* prefers-reduced-motion — Atol rule: all transitions collapse to 0 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }