/* ═══════════════════════════════════════════════════════════════ ZEROONE D·O·T·S AI — Design Tokens Colors, typography, spacing, radii, shadows, motion ═══════════════════════════════════════════════════════════════ */ /* ── TYPE SYSTEM v4.0 · FOUR ROLES ──────────────────────────────────── 1 · CHUBBO → titles & display (H1–H4, hero, pull-quotes) 2 · SUPREME → body & long-form reading copy 3 · SATOSHI → UI / interface chrome (buttons, nav, inputs, table cells, badges, captions — the product layer) 4 · JETBRAINS → data layer (numbers, code, timestamps) + uppercase eyebrows / labels All four are self-hosted variable woff2. Everything else is RETIRED. ─────────────────────────────────────────────────────────────────── */ /* ── ROLE 1 · DISPLAY: Chubbo (chunky editorial slab — self-hosted variable) ── Titles, H1–H4, hero, pull-quotes. Weight 700; native italics for accent. */ @font-face { font-family:'Chubbo'; font-style:normal; font-weight:200 700; font-display:swap; src:url('../fonts/Chubbo-Variable.woff2') format('woff2-variations'); } @font-face { font-family:'Chubbo'; font-style:italic; font-weight:200 700; font-display:swap; src:url('../fonts/Chubbo-VariableItalic.woff2') format('woff2-variations'); } /* ── ROLE 2 · BODY: Supreme (clean neo-grotesque — self-hosted variable) ── Long-form reading copy, leads, paragraphs. 400 body, 500 medium, 700 emphasis; native italics. */ @font-face { font-family:'Supreme'; font-style:normal; font-weight:100 800; font-display:swap; src:url('../fonts/Supreme-Variable.woff2') format('woff2-variations'); } @font-face { font-family:'Supreme'; font-style:italic; font-weight:100 800; font-display:swap; src:url('../fonts/Supreme-VariableItalic.woff2') format('woff2-variations'); } /* ── ROLE 3 · UI / INTERFACE: Satoshi (self-hosted variable woff2) ── Buttons, nav, inputs, table cells, badges, captions, tabs. The dense product-chrome voice — distinct from Supreme's editorial reading. */ @font-face { font-family:'Satoshi'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'); } @font-face { font-family:'Satoshi'; font-style:italic; font-weight:300 900; font-display:swap; src:url('../fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'); } /* ── ROLE 4 · DATA / LABELS: JetBrains Mono (self-hosted variable woff2) ── All numeric data, code, timestamps, hex codes + uppercase eyebrows. */ @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'); } @font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:100 800; font-display:swap; src:url('../fonts/JetBrainsMono-VariableItalic.woff2') format('woff2-variations'); } :root { /* ── D.O.T.S. Pillar Pastels (mapped to framework) ── */ --lavender: #C8B6FF; /* D · Data */ --mint: #B8E0D2; /* O · Operations */ --peach: #FFCDB2; /* T · Tech */ --sky: #A2D2FF; /* S · Strategy */ --rose: #FFB5C2; /* Accent · Creative */ --lemon: #FFF3B0; /* Highlight */ /* Pillar aliases (semantic) */ --pillar-data: var(--lavender); --pillar-operations: var(--mint); --pillar-tech: var(--peach); --pillar-strategy: var(--sky); /* ── Pillar tonal ladders — 5 steps per pillar, tint → base → shade ── Use tints (20/40) for backgrounds + fills on light; use shades (80/95) for text + icons on light. The base (60) is the identity pastel. */ /* Data · Lavender family */ --data-20: #EDE6FF; /* Very light tint — surface */ --data-40: #D3C5FF; /* Soft tint — fill */ --data-60: #C8B6FF; /* BASE — identity */ --data-80: #5B3FD4; /* Shade — text, icons, strokes */ --data-95: #2D1B4E; /* Deep — plum, italic, hero ink */ /* Operations · Mint family */ --ops-20: #E5F3EC; --ops-40: #CCE9DC; --ops-60: #B8E0D2; /* BASE */ --ops-80: #1F7A5C; --ops-95: #0F3D2E; /* Tech · Peach family */ --tech-20: #FFEFE3; --tech-40: #FFDFC8; --tech-60: #FFCDB2; /* BASE */ --tech-80: #A8521A; --tech-95: #5C2A0D; /* Strategy · Sky family */ --strat-20: #E5F1FF; --strat-40: #C5E0FF; --strat-60: #A2D2FF; /* BASE */ --strat-80: #1E5B9C; --strat-95: #0F2E4F; /* ── Mid-value neutral anchors (warm + cool slate) ── Bridge between cream surfaces and ink dark. Useful for filled panels, nested cards, hero sub-sections that need depth without pure black. */ --slate-warm: #3A3D4A; /* Warm slate — cards on dark hero */ --slate-cool: #27425D; /* Cool slate — info panels, editorial */ /* ── Pillar "deep" variants — WCAG-safe for text + icons on light canvas ── The pastels (above) are IDENTITY colors: use as dots, tint backgrounds, borders, and pillar-accent strokes. They FAIL contrast as foreground. The deep variants (below) are FUNCTIONAL colors: use for text, icon strokes, and filled elements on cream/white. All pass AA at 14px+. */ --pillar-data-deep: #5B3FD4; /* Lavender → Deep violet */ --pillar-operations-deep: #1F7A5C; /* Mint → Deep green */ --pillar-tech-deep: #A8521A; /* Peach → Burnt sienna */ --pillar-strategy-deep: #1E5B9C; /* Sky → Deep blue */ /* ── Deep Anchors ── */ --ink: #191924; /* Primary text, dark BGs */ --plum: #2D1B4E; /* Hovers, premium */ --charcoal: #2A2A3C; /* Footer, dark borders */ /* ── Warm Neutrals (Anthropic-style editorial) ── */ --cream-50: #FDFCFA; --cream-100: #F8F7F4; --cream-150: #F2F0EC; --sand-200: #E8E6E0; --sand-300: #D4D1C9; --stone-400: #B5B1A7; --stone-500: #918D82; --stone-600: #6E6B62; --slate-700: #4A4842; --slate-800: #2E2D29; /* ── Sidebar (dark shell) ── */ --sidebar-bg: #13131D; --sidebar-hover: #1E1E2E; --sidebar-active: #252538; --sidebar-border: #2A2A3C; --sidebar-text: #A8A6B0; --sidebar-text-active: #FDFCFA; /* ── Semantic ── */ --teal: #4ECDC4; --teal-hover: #3DB8B0; --amber: #D4A574; --gold: #F5C542; --danger: #EF4444; --success: #10B981; /* Foreground / Background aliases */ --bg: var(--cream-50); --bg-surface: #FFFFFF; --bg-elevated: var(--cream-100); --fg: var(--ink); --fg-muted: var(--stone-600); --fg-subtle: var(--stone-500); --border: var(--sand-200); --border-hover: var(--sand-300); /* ── Brand Gradients ── */ --g-aurora: linear-gradient(135deg, #C8B6FF, #A2D2FF, #B8E0D2); /* @kind color */ --g-warmth: linear-gradient(135deg, #FFCDB2, #FFB5C2, #C8B6FF); /* @kind color */ --g-cosmos: linear-gradient(135deg, #191924, #2D1B4E); /* @kind color */ /* ── Typography — TYPE SYSTEM v4.0 (four roles) ────────────────────── DISPLAY = Chubbo — titles, H1–H4, hero, pull-quotes. Weight 700; native italics in --plum for key-phrase emphasis. BODY = Supreme — long-form reading copy, leads, paragraphs. 400 body, 500 medium, 700 emphasis. Native italics. UI = Satoshi — interface chrome: buttons, nav, inputs, table cells, badges, captions, tabs. The dense product layer. DATA = JetBrains Mono — numbers, code, timestamps, hex + the uppercase eyebrow / label voice (letterspaced). ──────────────────────────────────────────────────────────────────── */ --font-serif: 'Chubbo', Georgia, 'Times New Roman', serif; --font-display: 'Chubbo', system-ui, sans-serif; --font-body: 'Supreme', system-ui, -apple-system, sans-serif; --font-ui: 'Satoshi', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'JetBrains Mono', ui-monospace, monospace; /* ── Breakpoints (mobile-first) ── */ --bp-xs: 360px; /* @kind other */ /* Small phones (iPhone SE, older Android) */ --bp-sm: 480px; /* @kind other */ /* Large phones / phablet */ --bp-md: 768px; /* @kind other */ /* Tablet portrait */ --bp-lg: 1024px; /* @kind other */ /* Tablet landscape / small laptop */ --bp-xl: 1280px; /* @kind other */ /* Desktop */ --bp-2xl: 1536px; /* @kind other */ /* Wide desktop */ /* ── Touch targets (iOS HIG 44pt / Material 48dp) ── */ --touch-min: 44px; /* @kind spacing */ /* Minimum hit area — any tap target */ --touch-comfort: 48px; /* @kind spacing */ /* Comfort — primary CTAs, nav */ --touch-large: 56px; /* @kind spacing */ /* Hero CTAs, bottom-nav tabs */ /* ── Fluid type scale (mobile 360 → desktop 1280) ── Fixed px tokens below REMAIN for desktop-only layouts; the fluid tokens (*-fl) are mobile-safe and auto-scale. Use --fl-* on anything that renders below 768px. */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 52px; --text-4xl: 76px; /* Fluid (responsive) scale — use these on mobile+responsive surfaces */ --fl-xs: clamp(10px, 0.7vw + 8px, 11px); /* @kind other */ --fl-sm: clamp(12px, 0.4vw + 11px, 13px); /* @kind other */ --fl-base: clamp(14px, 0.4vw + 13px, 16px); /* @kind other */ --fl-md: clamp(15px, 0.6vw + 13px, 18px); /* @kind other */ --fl-lg: clamp(17px, 0.8vw + 14px, 22px); /* @kind other */ --fl-xl: clamp(22px, 2vw + 14px, 32px); /* @kind other */ --fl-2xl: clamp(28px, 3vw + 14px, 44px); /* @kind other */ --fl-3xl: clamp(34px, 4vw + 14px, 60px); /* @kind other */ --fl-4xl: clamp(40px, 6vw + 14px, 84px); /* @kind other */ /* ── Spacing (8px grid) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* ── Fluid spacing (mobile → desktop) ── Use these for section padding, gaps, hero margins on responsive pages. They collapse gracefully at 360px and open up at 1280px+. */ --sp-fl-xs: clamp(4px, 0.4vw + 3px, 6px); /* @kind spacing */ --sp-fl-sm: clamp(8px, 0.8vw + 5px, 12px); /* @kind spacing */ --sp-fl-md: clamp(12px, 1vw + 8px, 20px); /* @kind spacing */ --sp-fl-lg: clamp(16px, 2vw + 10px, 32px); /* @kind spacing */ --sp-fl-xl: clamp(24px, 3vw + 12px, 48px); /* @kind spacing */ --sp-fl-2xl: clamp(32px, 4vw + 16px, 72px); /* @kind spacing */ --sp-fl-3xl: clamp(40px, 6vw + 20px, 112px); /* @kind spacing */ /* Section padding recipes — use on
wrappers */ --section-x: clamp(16px, 5vw, 80px); /* @kind spacing */ /* horizontal page gutter */ --section-y: clamp(48px, 7vw, 120px); /* @kind spacing */ /* vertical section rhythm */ --container-max: 1280px; /* @kind spacing */ /* max content width */ /* ── Safe-area insets (iOS notch / home indicator / Android nav) ── */ --safe-top: env(safe-area-inset-top, 0px); /* @kind spacing */ --safe-right: env(safe-area-inset-right, 0px); /* @kind spacing */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* @kind spacing */ --safe-left: env(safe-area-inset-left, 0px); /* @kind spacing */ /* ── Radius ── */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 999px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(25,25,36,.04); --shadow-md: 0 4px 12px rgba(25,25,36,.06); --shadow-lg: 0 10px 32px rgba(25,25,36,.08); --shadow-xl: 0 20px 50px rgba(25,25,36,.10); --shadow-2xl: 0 30px 80px rgba(25,25,36,.14); --shadow-focus: 0 0 0 4px rgba(200,182,255,.20); /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 150ms; /* @kind other */ --dur-med: 250ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ } /* ═══════════════════════════════════════════════════════════════ SEMANTIC TYPOGRAPHY — drop-in element styles ═══════════════════════════════════════════════════════════════ */ body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── TYPE SYSTEM v4.0 · Semantic typography ──────────────────────────── H1 / .hero-text = Chubbo (display) at hero scale. Italic for emphasis (native italic, coloured --plum). H2–H4 = Chubbo — section headings. No forced uppercase; weight carries. Body / p / .lead = Supreme — the reading layer. UI chrome (buttons, nav, inputs) = Satoshi via --font-ui. .eyebrow / .label / .data-value = JetBrains Mono — labels + data. ──────────────────────────────────────────────────────────────────── */ /* Hero / editorial display — Chubbo */ h1, .h1, .hero-text { font-family: var(--font-serif); font-weight: 700; /* Chubbo display — weight carries the authority */ font-size: clamp(40px, 6.5vw, var(--text-4xl)); line-height: 0.96; letter-spacing: -0.02em; color: var(--ink); } h1 em, .h1 em, .hero-text em { font-style: italic; color: var(--plum); /* Chubbo has native italic — no swap needed */ letter-spacing: -0.03em; } /* Section headings — Chubbo */ h2, .h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.5vw, var(--text-3xl)); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em; } h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.3; letter-spacing: -0.01em; } /* Italic accent on display headings → falls to body italic */ h2 em, h3 em, h4 em, .display em { font-family: var(--font-body); font-style: italic; font-weight: inherit; letter-spacing: 0; color: var(--plum); } em, .italic { font-style: italic; color: var(--plum); } p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.75; color: var(--fg-muted); } .lead { font-size: var(--text-md); line-height: 1.8; color: var(--fg-muted); } small, .caption { font-size: var(--text-sm); color: var(--fg-subtle); } /* Mono labels / eyebrows / tags */ .mono, code, kbd, pre { font-family: var(--font-mono); } /* Eyebrow / section labels — JetBrains Mono */ .eyebrow, .label-mono { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 3px; text-transform: uppercase; color: var(--stone-500); } /* Data values — JetBrains Mono */ .data-value { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Fluid heading utilities (Chubbo display) */ .h1-fluid { font-family: var(--font-serif); font-weight: 400; font-size: var(--fl-4xl); line-height: 0.96; letter-spacing: -0.025em; } .h2-fluid { font-family: var(--font-display); font-weight: 800; font-size: var(--fl-3xl); line-height: 1.05; letter-spacing: -0.03em; } ::selection { background: var(--lavender); color: var(--ink); } *:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ MOBILE UTILITIES — responsive helpers ═══════════════════════════════════════════════════════════════ */ /* Page container — handles gutter + max width + safe-area */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: max(var(--section-x), var(--safe-left)); padding-right: max(var(--section-x), var(--safe-right)); box-sizing: border-box; } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); } /* Touch-target enforcement */ .tap { min-height: var(--touch-min); min-width: var(--touch-min); } .tap-lg { min-height: var(--touch-comfort); min-width: var(--touch-comfort); } /* Safe-area helpers — bottom tab bars, modal sheets, etc. */ .pb-safe { padding-bottom: calc(var(--sp-4) + var(--safe-bottom)); } .pt-safe { padding-top: calc(var(--sp-4) + var(--safe-top)); } /* Show/hide by breakpoint */ .mobile-only { display: block; } .desktop-only { display: none; } @media (min-width: 768px) { .mobile-only { display: none; } .desktop-only { display: block; } } /* Responsive hero + body — mobile defaults, desktop overrides */ .h1-fluid { font-family: var(--font-display); font-weight: 700; font-size: var(--fl-4xl); line-height: 1.02; letter-spacing: -0.015em; } .h2-fluid { font-family: var(--font-display); font-weight: 600; font-size: var(--fl-3xl); line-height: 1.08; letter-spacing: -0.005em; } .body-fluid { font-size: var(--fl-base); line-height: 1.6; } /* Stack on mobile, row on desktop */ .stack-to-row { display: flex; flex-direction: column; gap: var(--sp-fl-md); } @media (min-width: 768px) { .stack-to-row { flex-direction: row; } }