/* TB Design System — design tokens. Single source of truth for color, type, spacing, and effects. Both the homepage and the challenge/apply pages consume this file. */ :root { /* Brand core */ --tb-black: #000000; --tb-space-gray: #1c1c1e; --tb-silver: #e5e5e7; --tb-white: #ffffff; --tb-blue: #0a6fff; /* Ink scale */ --ink-1000: #000000; --ink-900: #0a0a0b; --ink-800: #141416; --ink-700: #1c1c1e; --ink-600: #2a2a2d; --ink-500: #3a3a3e; --ink-400: #6e6e73; --ink-300: #8e8e93; --ink-200: #c7c7cc; --ink-100: #e5e5e7; --ink-50: #f5f5f7; --ink-0: #ffffff; /* Blue accent ramp */ --blue-700: #0050c8; --blue-600: #0a6fff; --blue-500: #2b82ff; --blue-300: #7db0ff; --blue-soft: rgba(10, 111, 255, 0.14); --blue-glow: rgba(10, 111, 255, 0.35); /* Semantic — default theme is dark (brand is black-first) */ --bg: var(--ink-1000); --surface: var(--ink-900); --surface-raised: var(--ink-700); --surface-sunken: #050506; --text: var(--ink-0); --text-secondary: var(--ink-300); --text-muted: var(--ink-400); --text-inverse: var(--ink-1000); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); --border-faint: rgba(255, 255, 255, 0.06); --accent: var(--blue-600); --accent-hover: var(--blue-500); --accent-press: var(--blue-700); --accent-text: #ffffff; --accent-soft: var(--blue-soft); --focus-ring: rgba(10, 111, 255, 0.55); /* Type */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --heading-font: var(--font-sans); --tracking-label: 0.22em; --tracking-wide: 0.06em; --tracking-tight: -0.015em; --tracking-snug: -0.03em; /* Spacing — 4px base grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container: 1200px; --container-narrow: 720px; --gutter: 24px; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55); --shadow-blue: 0 10px 34px rgba(10, 111, 255, 0.35); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur-base: 220ms; } /* Light theme scope — toggled via [data-theme="light"] on */ [data-theme="light"] { --bg: var(--ink-0); --surface: var(--ink-50); --surface-raised: #ffffff; --surface-sunken: var(--ink-100); --text: var(--ink-1000); --text-secondary: var(--ink-400); --text-muted: var(--ink-300); --text-inverse: var(--ink-0); --border: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.16); --border-faint: rgba(0, 0, 0, 0.06); --accent-hover: var(--blue-700); --accent-press: var(--blue-700); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07); --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.1); }