/* ============================================================================ BrandPush Report v2 - tokens.css ---------------------------------------------------------------------------- Design-token system. OKLCH throughout for the systematic ramps; the six locked BrandPush brand anchors are kept as exact hex (brand fidelity is a hard requirement) with their OKLCH equivalents noted. Neutrals are tinted cool toward the navy ink hue (~272) so the whole UI reads as one family. Cascade layers declared once here; every other stylesheet appends to them. Order: reset < base < tokens < components < utilities (utilities win). ============================================================================ */ @layer reset, base, tokens, components, utilities; @layer tokens { :where(:root) { /* ----- BRAND ANCHORS (locked, exact). OKLCH noted for reference. ------- */ --bp-coral: #FB5D6D; /* oklch(.685 .185 16) - the one action color */ --bp-coral-deep: #EA4659; /* oklch(.625 .195 18) - action hover/active */ --bp-violet: #6C5CE7; /* oklch(.560 .205 285) - feature signal */ --bp-indigo: #1B1B3A; /* oklch(.215 .055 280) - masthead / footer */ --bp-navy: #22244C; /* oklch(.255 .060 280) - primary ink */ --bp-canvas: #F5F7FA; /* oklch(.972 .004 264) - page canvas */ /* ----- NEUTRAL RAMP: cool navy-tinted (hue ~272), perceptually even ----- */ --n-50: oklch(0.985 0.003 264); /* surface-2 / subtle row tint */ --n-100: oklch(0.965 0.005 270); /* paper-2 / track fill */ --n-150: oklch(0.935 0.008 272); /* hairline-strong areas */ --n-200: oklch(0.916 0.009 272); /* border */ --n-300: oklch(0.865 0.013 274); /* border-strong */ --n-400: oklch(0.760 0.024 280); /* faint text / disabled glyph */ --n-500: oklch(0.620 0.030 282); /* muted text */ --n-600: oklch(0.520 0.034 281); /* body text */ --n-700: oklch(0.402 0.044 280); /* secondary heading ink */ --n-900: var(--bp-navy); /* primary ink */ /* ----- CORAL RAMP (action): hue ~16 -------------------------------------- */ --coral-50: oklch(0.966 0.018 18); /* tinted bg */ --coral-100: oklch(0.928 0.040 18); --coral-200: oklch(0.870 0.075 17); --coral-500: var(--bp-coral); /* solid action */ --coral-600: var(--bp-coral-deep); /* action hover */ --coral-700: oklch(0.535 0.165 19); /* action text/active */ /* ----- VIOLET RAMP (feature signal): hue ~285 ---------------------------- */ --violet-50: oklch(0.955 0.024 286); --violet-100: oklch(0.918 0.044 286); --violet-500: var(--bp-violet); --violet-700: oklch(0.470 0.170 286); /* accessible violet text on tint */ /* ----- STATUS ----------------------------------------------------------- */ --green-soft: oklch(0.955 0.030 158); --green: oklch(0.580 0.120 158); /* ~#1F9D6B, text-on-soft + icons */ --green-solid: oklch(0.520 0.115 158); /* fills with white text pass 4.5:1 */ --gold: oklch(0.755 0.130 75); /* ~#E3A53C, stars (decorative) */ --gold-soft: oklch(0.960 0.040 80); /* ----- DARK-BAND tokens (masthead / footer on --bp-indigo) -------------- */ --on-dark: oklch(0.955 0.006 272); --on-dark-soft: oklch(0.730 0.024 282); --on-dark-line: oklch(1 0 0 / 0.14); --on-dark-green: oklch(0.800 0.110 158); /* ----- SEMANTIC (components consume THESE) ------------------------------ */ --color-bg: #F6F7FB; --color-surface: #ffffff; --color-surface-2: var(--n-50); --color-border: var(--n-200); --color-border-strong: var(--n-300); --color-text: var(--n-900); --color-text-2: var(--n-700); --color-body: var(--n-600); --color-muted: var(--n-500); --color-faint: var(--n-400); --color-primary: var(--bp-navy); --color-primary-hover: #34366B; --color-primary-text: var(--violet-700); --color-on-primary: #ffffff; --color-ring: var(--violet-500); /* ----- TYPE: one family (Hanken Grotesk), hierarchy by weight ----------- */ --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Compact/report scale with a display step for the masthead. Hand-tuned. */ --text-2xs: 0.6875rem; /* 11px - micro caps labels */ --text-xs: 0.75rem; /* 12px - table caps headers */ --text-sm: 0.8125rem; /* 13px - secondary UI */ --text-md: 0.875rem; /* 14px - dense values / nav */ --text-base:0.9375rem; /* 15px - controls / table values */ --text-lg: 1rem; /* 16px - body / lead */ --text-xl: 1.1875rem; /* 19px - card headline */ --text-2xl: 1.4375rem; /* 23px - sub-section title */ --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* section title */ --display: clamp(3.25rem, 2rem + 6.2vw, 6.75rem); /* masthead H1 */ --display-num: clamp(4.5rem, 2.6rem + 8vw, 7.25rem); /* masthead stat */ --lh-none: 1; --lh-tight: 1.08; --lh-snug: 1.28; --lh-normal: 1.5; --lh-relaxed:1.62; --w-normal: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; --tr-tighter: -0.035em; /* display */ --tr-tight: -0.018em; /* mid headings */ --tr-snug: -0.008em; --tr-caps: 0.1em; /* eyebrows / caps labels */ --tr-caps-sm: 0.06em; /* ----- SPACE (4px base) ------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-10:2.5rem; --s-12:3rem; --s-14:3.5rem; --s-16:4rem; --s-20:5rem; /* ----- RADIUS: real scale. Concentric rule: inner = outer - padding ----- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; /* panels / cards */ --r-2xl: 18px; --r-full:9999px; /* ----- SHADOWS: layered, tinted toward the navy neutral (not black) ----- */ --shadow-color: 272 30% 18%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 2px 4px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 8px 16px hsl(var(--shadow-color) / 0.08); --shadow-lg: 0 4px 10px hsl(var(--shadow-color) / 0.06), 0 20px 38px hsl(var(--shadow-color) / 0.12); --shadow-xl: 0 8px 18px hsl(var(--shadow-color) / 0.08), 0 36px 64px hsl(var(--shadow-color) / 0.16); /* ----- MOTION ----------------------------------------------------------- */ --dur-instant: 60ms; --dur-fast: 150ms; --dur-normal: 220ms; --dur-slow: 300ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* ----- Z-INDEX ---------------------------------------------------------- */ --z-sticky: 100; --z-dropdown: 600; --z-popover: 900; --z-tooltip: 1200; /* ----- LAYOUT ----------------------------------------------------------- */ --maxw: 1160px; --gutter: clamp(1.25rem, 0.6rem + 2.5vw, 2rem); } /* sRGB fallback for the long tail of old browsers (brand hex carry through). */ @supports not (color: oklch(0 0 0)) { :where(:root) { --n-200: #E6E9F1; --n-300: #D6DAE7; --n-400: #B0B4CC; --n-500: #888CA8; --n-600: #5A5E80; --n-700: #3C3F6B; --n-50: #F8FAFC; --n-100: #EDF0F6; --coral-50:#FFEBED; --coral-700:#D23347; --violet-50:#EDEAFC; --violet-700:#5546C9; --green:#1F9D6B; --green-solid:#18794F; --green-soft:#E3F4EC; --gold:#E3A53C; --gold-soft:#FBF1DE; } } } /* ============================================================================ RESET (Andy Bell / Comeau lineage, trimmed) - zero-specificity ============================================================================ */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { background: var(--color-bg); color-scheme: light only; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } img, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; } :where(:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; } /* the hosting shell can force html/body transparent, so the app root paints the canvas itself */ #root { isolation: isolate; background: var(--color-bg); min-height: 100dvh; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ============================================================================ BASE: global element defaults + layout primitives (inheritance does the work) ============================================================================ */ @layer base { body { background: var(--color-bg); color: var(--color-text); font-family: var(--font); font-size: var(--text-lg); line-height: var(--lh-normal); font-variant-numeric: lining-nums; } ::selection { background: var(--bp-navy); color: #fff; } /* numbers that sit in tables / KPIs / stats never jitter */ .tnum { font-variant-numeric: tabular-nums lining-nums; } /* --- layout primitives (Every Layout, reused everywhere) --- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .stack > * + * { margin-block-start: var(--stack, var(--s-4)); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-3)); } .eyebrow { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--color-muted); } /* section rhythm: plain bold title + gray subtitle, dashboard-style */ .section { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); } .section-head { margin-block-end: var(--s-6); } .section-title { font-size: var(--text-2xl); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--color-text); } .section-sub { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-muted); margin-block-start: var(--s-2); max-width: 64ch; } }