/* ───────────────────────────────────────────────────────────────────── MBK TOOLS — DESIGN TOKENS The single source of truth for the redesign. Consumed by style-v2.css. See design-system/MASTER.md for rationale. ───────────────────────────────────────────────────────────────────── */ :root { /* ── COLOR · NEUTRALS (warm undertone — industrial premium, not tech-startup gray) */ --neutral-0: #FAFAFA; --neutral-50: #F5F4F1; --neutral-100: #ECEAE4; --neutral-200: #D6D3CB; --neutral-300: #B8B4A9; --neutral-400: #918C80; --neutral-500: #6B665C; --neutral-600: #4A463E; --neutral-700: #2E2B25; --neutral-800: #1A1815; --neutral-900: #0F0D0B; --neutral-950: #0A0907; /* ── COLOR · BRAND ACCENTS (used sparingly, never as section backgrounds) */ --accent-orange: #C8651B; --accent-orange-hover: #B05816; --accent-orange-soft: rgba(200, 101, 27, 0.08); --accent-orange-glow: rgba(200, 101, 27, 0.24); --accent-navy: #2C3E6B; --accent-navy-hover: #243355; --accent-navy-soft: rgba(44, 62, 107, 0.06); /* Navy ramp — structural brand color used generously */ --navy-ink: #1A2747; /* deep navy for headings on light */ --navy-mid: #1E2F52; --navy-deep: #0E1426; /* darkest — hero/footer/cta base */ --navy-soft: rgba(44, 62, 107, 0.05); /* ── COLOR · SEMANTIC ALIASES (always reference these, not raw neutrals) */ --bg-page: #FBFAF7; --bg-surface: #FFFFFF; --bg-sunken: #F2F0EA; --bg-inverse: var(--navy-deep); --bg-elevated: rgba(255, 255, 255, 0.78); --heading: var(--navy-ink); /* all large headings on light bg */ --text-primary: #1C1A17; --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); --text-muted: #8C97B4; /* navy-tinted secondary headline */ --text-inverse: #FDFCFA; --border-subtle: rgba(15, 13, 11, 0.06); --border-default: rgba(15, 13, 11, 0.10); --border-strong: rgba(15, 13, 11, 0.16); --border-inverse: rgba(255, 255, 255, 0.10); /* ── TYPOGRAPHY · FAMILIES */ --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; /* ── TYPOGRAPHY · TYPE SCALE Display: massive editorial headlines (hero, section openers) Heading: card titles, sub-headers Body: paragraph copy Micro: overlines, labels, meta */ /* Hero headline scales with BOTH width and height so it never overgrows a short window */ --text-display-2xl: clamp(40px, min(7.5vw, 12vh), 104px); --text-display-xl: clamp(48px, 7vw, 96px); --text-display-lg: clamp(40px, 5vw, 72px); --text-display-md: clamp(32px, 4vw, 56px); --text-heading-1: clamp(28px, 3vw, 40px); --text-heading-2: clamp(22px, 2.2vw, 28px); --text-heading-3: 18px; --text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; --text-micro: 11px; /* ── TYPOGRAPHY · WEIGHTS */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ── TYPOGRAPHY · TRACKING (letter-spacing) */ --tracking-tight: -0.04em; /* display */ --tracking-snug: -0.02em; /* heading */ --tracking-normal: -0.01em; /* body */ --tracking-wide: 0.08em; /* micro / small caps */ /* ── TYPOGRAPHY · LINE HEIGHT */ --leading-tight: 1.00; /* display */ --leading-snug: 1.15; /* heading */ --leading-normal: 1.55; /* body */ --leading-loose: 1.75; /* paragraph long-form */ /* ── SPACING · 4PX BASE SCALE */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px; --space-48: 192px; /* ── SPACING · SECTION RHYTHM (Apple's signature breathing room) */ --section-y-sm: clamp(64px, 8vh, 96px); --section-y-md: clamp(96px, 12vh, 144px); --section-y-lg: clamp(144px, 18vh, 240px); /* ── LAYOUT · CONTAINER WIDTHS */ --container-narrow: 720px; --container-text: 960px; --container-base: 1200px; --container-wide: 1440px; --container-bleed: 1680px; /* ── MOTION · EASING CURVES */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Apple signature */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* softer */ --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* dramatic */ --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --ease-spring-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* punchy */ /* ── MOTION · DURATIONS */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-med: 280ms; --dur-slow: 400ms; --dur-x-slow: 680ms; /* ── ELEVATION · SUBTLE PAPER-LIKE SHADOWS (not Material) */ --shadow-e0: none; --shadow-e1: 0 1px 2px rgba(15, 13, 11, 0.04), 0 1px 1px rgba(15, 13, 11, 0.02); --shadow-e2: 0 4px 12px -2px rgba(15, 13, 11, 0.06), 0 2px 4px -1px rgba(15, 13, 11, 0.04); --shadow-e3: 0 12px 32px -8px rgba(15, 13, 11, 0.10), 0 4px 12px -2px rgba(15, 13, 11, 0.06); --shadow-e4: 0 24px 48px -12px rgba(15, 13, 11, 0.16), 0 8px 24px -4px rgba(15, 13, 11, 0.08); /* ── BORDER RADIUS */ --radius-0: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; /* ── Z-INDEX SCALE */ --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-navbar: 40; --z-modal: 50; --z-toast: 60; --z-cursor: 90; /* ── BREAKPOINTS (reference only — CSS uses raw values) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* ── REDUCED MOTION OVERRIDES ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; --dur-x-slow: 0ms; } }