/* ============================================================= TNA Design Tokens — True North Atlas Source of truth. Import this first. Generated: 2026-06-12 ============================================================= */ @layer tokens { :root { /* ── Palette ────────────────────────────────────────────── Primary: deep professional blue (Prussian leaning, not the old flat #2563eb) Surface: warm off-white paper (not pure #fff) Ink: cool-neutral slate scale Accent success: one teal-green (replaces stray greens) ─────────────────────────────────────────────────────────── */ /* Blue scale */ --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-600: #1d4ed8; /* primary — deeper than old #2563eb */ --color-blue-700: #1e40af; --color-blue-800: #1e3a8a; --color-blue-900: #172554; /* Ink / slate scale */ --color-ink-0: #fafaf9; /* warm off-white surface */ --color-ink-50: #f5f4f2; /* slightly warmer than #f8fafc */ --color-ink-100: #ede9e4; /* warm light border */ --color-ink-200: #d6d0c8; --color-ink-300: #b0a99f; --color-ink-400: #857d73; --color-ink-500: #5c5650; --color-ink-600: #44403b; --color-ink-700: #292522; --color-ink-800: #1a1816; --color-ink-900: #0f0e0c; /* near-black ink */ /* Success / positive (replaces all stray greens) */ --color-success-light: #d1fae5; --color-success: #059669; /* teal-green, single semantic token */ --color-success-dark: #047857; /* Warning */ --color-warning-light: #fef3c7; --color-warning: #d97706; /* Error */ --color-error-light: #fee2e2; --color-error: #dc2626; /* ── Semantic surface tokens ──────────────────────────── */ --surface-page: var(--color-ink-0); /* warm paper background */ --surface-subtle: var(--color-ink-50); /* card tray, section bg */ --surface-border: var(--color-ink-100); /* hairlines */ --surface-border-mid: var(--color-ink-200); --surface-card: #ffffff; /* cards float above warm bg */ --text-primary: var(--color-ink-800); /* body copy */ --text-secondary: var(--color-ink-500); /* muted labels */ --text-tertiary: var(--color-ink-400); /* placeholders */ --text-inverse: var(--color-ink-0); /* on dark backgrounds */ --text-link: var(--color-blue-600); --text-link-hover: var(--color-blue-700); --brand-primary: var(--color-blue-600); --brand-hover: var(--color-blue-700); --brand-active: var(--color-blue-800); /* ── Typography ────────────────────────────────────────── Pairing: Display (H1, H2, pull quotes): Fraunces — serif with optical size axes, editorial character, warm ink feel Body / UI: Inter — familiar, legible, system-close Both loaded from Google Fonts in global.css. ─────────────────────────────────────────────────────────── */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace; /* Fluid type scale — clamp(min, preferred, max) */ --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem); /* 11-12px */ --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* 13-14px */ --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem); /* 15-16px */ --text-md: clamp(1rem, 0.96rem + 0.3vw, 1.125rem); /* 16-18px */ --text-lg: clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem); /* 18-21px */ --text-xl: clamp(1.25rem, 1.1rem + 0.9vw, 1.625rem); /* 20-26px */ --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem); /* 24-34px */ --text-3xl: clamp(1.875rem, 1.4rem + 2.5vw, 2.875rem); /* 30-46px */ --text-4xl: clamp(2.25rem, 1.5rem + 4vw, 3.75rem); /* 36-60px */ --text-hero: clamp(2.75rem, 1.5rem + 6.5vw, 5.5rem); /* 44-88px */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed:1.75; --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-widest: 0.12em; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ── Spacing ───────────────────────────────────────────── Base-8 scale with fluid section gaps ─────────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Fluid section vertical padding */ --space-section-sm: clamp(3rem, 2rem + 5vw, 6rem); --space-section: clamp(4rem, 2.5rem + 7vw, 9rem); --space-section-lg: clamp(5rem, 3rem + 9vw, 12rem); /* ── Border radius ─────────────────────────────────────── ONE scale — killing the 8 vs 16 drift ─────────────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius: 8px; /* default card/button radius */ --radius-md: 12px; /* feature cards */ --radius-lg: 16px; /* larger panels */ --radius-xl: 24px; /* hero blobs, pill badges */ --radius-full: 9999px; /* pills, avatars */ /* ── Shadows ───────────────────────────────────────────── Warm-tinted, not cold grey ─────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 14, 12, 0.04); --shadow-sm: 0 2px 6px rgba(15, 14, 12, 0.06), 0 1px 2px rgba(15, 14, 12, 0.04); --shadow: 0 4px 16px rgba(15, 14, 12, 0.08), 0 1px 4px rgba(15, 14, 12, 0.05); --shadow-md: 0 8px 28px rgba(15, 14, 12, 0.10), 0 2px 8px rgba(15, 14, 12, 0.06); --shadow-lg: 0 16px 48px rgba(15, 14, 12, 0.12), 0 4px 12px rgba(15, 14, 12, 0.06); /* Blue glow for primary CTA focus/hover */ --shadow-blue-sm: 0 0 0 3px rgba(29, 78, 216, 0.18); --shadow-blue: 0 0 0 4px rgba(29, 78, 216, 0.22); /* ── Motion ────────────────────────────────────────────── Compositor-friendly only (transform, opacity, clip-path) Respects prefers-reduced-motion via global.css ─────────────────────────────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-normal: 240ms; --duration-slow: 400ms; --duration-reveal: 600ms; /* ── Layout ──────────────────────────────────────────────*/ --container-sm: 640px; --container-md: 768px; --container: 1100px; --container-lg: 1280px; --container-xl: 1440px; --nav-height: 64px; /* ── Z-index ladder ─────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400; } } /* end @layer tokens */