/* ============================================================================
PicoBlu Design System — tokens.css
ONE coherent, premium, dark-first system. Include this file first; every
color, font, size, spacing, radius, motion value flows from these variables.
Do NOT hardcode hex/px in components — reference the tokens.
Type: Inter Tight (display) + Inter (body/UI) + Source Serif 4 (editorial only)
Palette: brand #2f7fd0 / navy #1c4f8f on near-black, WCAG AA verified.
Author: design-system build. Values are engineered; taste is the human's call.
============================================================================ */
/* ---- 1. FONTS ------------------------------------------------------------ */
/* Google Fonts import (self-host later for perf: subset + font-display swap).
Equivalent form for :
*/
/* fonts preloaded via in for perf */
:root {
/* Font families + fallback stacks */
--font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Editorial serif — SCOPED to long-form editorial (Insights/reports) only. Never in UI, nav, tiles, buttons. */
--font-editorial: "Source Serif 4", Georgia, "Times New Roman", serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
/* Weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-display: 800; /* hero display only */
/* ---- 2. TYPE SCALE (base 16px, modular ~1.25 major third; fluid clamps) -- */
--fs-display-1: clamp(2.75rem, 1.6rem + 5.2vw, 4.75rem); /* 44 -> 76 hero */
--fs-display-2: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem); /* 36 -> 56 */
--fs-h1: clamp(2rem, 1.5rem + 2.3vw, 3rem); /* 32 -> 48 */
--fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); /* 26 -> 36 */
--fs-h3: 1.5rem; /* 24 */
--fs-h4: 1.25rem; /* 20 */
--fs-lead: 1.25rem; /* 20 — intro/lede paragraph */
--fs-body: 1.0625rem; /* 17 — default reading size (>16 floor) */
--fs-body-sm: 1rem; /* 16 — dense UI/secondary */
--fs-caption: 0.875rem; /* 14 — captions, meta */
--fs-overline: 0.75rem; /* 12 — eyebrows/labels, UPPERCASE + tracked */
/* Line heights */
--lh-display: 1.05;
--lh-heading: 1.2;
--lh-snug: 1.3;
--lh-body: 1.6;
--lh-ui: 1.4;
/* Letter spacing (tracking) */
--tracking-display: -0.025em; /* tighten large display */
--tracking-heading: -0.015em;
--tracking-body: 0;
--tracking-overline: 0.09em; /* uppercase labels */
/* ---- 3. COLOR — brand ramp (identity blue #2f7fd0 + navy #1c4f8f) -------- */
--brand-300: #7db4e8; /* light tint — decorative, focus glow */
--brand-400: #4d97e0; /* LINK text on dark (6.4:1 on --bg) */
--brand-500: #2f7fd0; /* BRAND PRIMARY identity — icons, borders, large display, accents (4.75:1) */
--brand-600: #2568b0; /* interactive FILL — white label passes AA (5.24:1) */
--brand-700: #1c4f8f; /* NAVY — deep fill/hover, panels (white 7.5:1) */
--brand-800: #163d6b; /* deeper navy */
--brand-900: #12294a; /* deepest — gradient base, section panels */
/* Neutrals — dark-first ramp */
--ink-950: #0a0a0a; /* page background (true neutral black, matches hero reveal) */
--ink-900: #0f1116; /* raised background band */
--surface-1: #14171e; /* cards / tiles */
--surface-2: #1b1f28; /* elevated / hover card */
--surface-3: #232833; /* input fields, wells */
--border: #262b36; /* solid hairline */
--border-soft: rgba(255,255,255,0.08); /* translucent hairline on any surface */
--border-strong: #37404e;
/* Text ramp (on dark) — all verified AA on --ink-950 */
--text-primary: #f4f6fa; /* headings + body (~17:1) */
--text-secondary: #aeb8c6; /* supporting copy (9.6:1) */
--text-tertiary: #7c8798; /* labels, meta, disabled (5.4:1) */
--text-on-brand: #ffffff; /* label on brand-600/700 fills */
--text-on-brand-inverse: #0a0b0e; /* if a light brand fill is ever used */
/* State colors (badges/alerts — verify 4.5:1 if used as small text) */
--success: #35c07a;
--warning: #e0a63b;
--danger: #e5544b;
--info: var(--brand-400);
/* Semantic aliases (reference THESE in components) */
--color-bg: var(--ink-950);
--color-bg-raised: var(--ink-900);
--color-accent: var(--brand-500);
--color-link: var(--brand-400);
--color-action: var(--brand-600);
--color-action-hover: var(--brand-700);
--focus-ring: 0 0 0 3px rgba(47,127,208,0.45);
--gradient-brand: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
--gradient-panel: linear-gradient(180deg, var(--brand-900) 0%, var(--ink-950) 100%);
/* ---- 4. SPACING — 4px base, every gap/margin/padding is a token --------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
--space-11: 10rem; /* 160 */
--section-y: clamp(4rem, 8vw, 8rem); /* vertical section rhythm 64->128 */
--section-y-lg: clamp(6rem, 10vw, 10rem);
/* ---- 5. LAYOUT — containers, line length ------------------------------- */
--container-wide: 1440px; /* full-bleed section frame */
--container-max: 1200px; /* standard content */
--container-narrow: 880px; /* focused blocks */
--container-text: 680px; /* prose / editorial reading (~66ch) */
--gutter: clamp(1rem, 4vw, 2.5rem);
--grid-cols: 12;
--grid-gap: var(--space-5);
--measure: 68ch; /* max line length for body prose */
/* ---- 6. RADII ---------------------------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
/* ---- 7. BORDERS + ELEVATION (subtle on dark — glow > drop shadow) ------- */
--bw-hairline: 1px;
--bw-thick: 2px;
--shadow-1: 0 1px 2px rgba(0,0,0,0.4);
--shadow-2: 0 8px 24px rgba(0,0,0,0.45);
--shadow-3: 0 24px 60px rgba(0,0,0,0.55);
--glow-brand: 0 0 40px rgba(47,127,208,0.25);
/* ---- 8. MOTION --------------------------------------------------------- */
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--dur-deliberate: 480ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* ---- 9. COMPONENT TOKENS ----------------------------------------------- */
--nav-height: 4.5rem; /* 72px */
--btn-height: 2.75rem; /* 44px */
--btn-height-lg: 3.25rem; /* 52px */
--btn-padding-x: var(--space-5);
--btn-radius: var(--radius-md);
--btn-weight: var(--fw-semibold);
--card-padding: var(--space-6);
--card-radius: var(--radius-lg);
--logo-belt-height: 1.75rem; /* 28px — uniform optical logo height */
--logo-belt-gap: var(--space-7);
--logo-belt-opacity: 0.62; /* monochrome rest state; 1.0 on hover */
--input-height: 2.75rem;
}
/* ---- 10. BASELINE (optional; component layer can override) ---------------- */
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--color-bg);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--tracking-body);
font-feature-settings: "cv05" 1, "ss01" 1; /* Inter refinements */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .display {
font-family: var(--font-display);
color: var(--text-primary);
letter-spacing: var(--tracking-heading);
line-height: var(--lh-heading);
font-weight: var(--fw-bold);
text-wrap: balance;
}
.display-1 { font-size: var(--fs-display-1); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display-2 { font-size: var(--fs-display-2); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-snug); }
.overline {
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: var(--tracking-overline);
font-weight: var(--fw-semibold);
color: var(--brand-400);
}
p { max-width: var(--measure); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Editorial serif — apply ONLY inside long-form editorial contexts */
.editorial h1, .editorial h2, .editorial .display {
font-family: var(--font-editorial);
font-weight: var(--fw-semibold);
letter-spacing: 0;
}
.editorial { max-width: var(--container-text); }
/* Tabular figures for data/stats/tickers (keeps numbers aligned) */
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* ---- 11. MOTION ACCESSIBILITY ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}