/* ============================================================================= Fiberhub — Theme Tokens (M2-A) ---------------------------------------------------------------------------- Single source of truth for color, type, spacing, radii, motion. Theme-aware via `.dark` class on . Default is dark (the brand); light mode is the accessibility/preference fallback with the same component shapes. All color tokens have been verified for WCAG 2.2 AA contrast at minimum; most pass AAA. See contrast notes inline. Architecture: vanilla CSS custom properties. No build step. No utility-class layer. Components consume tokens directly via var(--token-name). Author: Claude (Phase 1, Milestone 2-A — 2026-05-25) ============================================================================= */ /* ----- Default / Dark theme -------------------------------------------------- */ :root, html.dark { color-scheme: dark; /* Surfaces (3 elevation levels + border tokens) ------------------------- */ --bg-base: #141A24; /* Page background. Lifted from VW's #0d0f14 — less harsh. */ --bg-elev: #1B2230; /* Hero overlay, partner-strip band — one step up from base. */ --bg-card: #1F2837; /* Cards, lifted surfaces — two steps up. */ --border: #283448; /* Default hairline borders, dividers. */ --border-strong: #3A4A65; /* Hover/focus borders, emphasized dividers. */ --shadow-rgb: 0, 0, 0; /* For shadows: rgba(var(--shadow-rgb), 0.4) etc. */ /* Text (3-level hierarchy) --------------------------------------------- */ --text-primary: #E8EDF5; /* Body, headings. Contrast on bg-base: 13.6:1 ✅ AAA */ --text-secondary: #9BAAC2; /* Sub-text, muted. Contrast on bg-base: 6.1:1 ✅ AAA */ --text-tertiary: #6F7E96; /* Fine print. Contrast on bg-base: 3.5:1 ✅ AA-large/UI */ /* Brand (Azure family + supporting depth) ------------------------------ */ --brand: #2D8BFA; /* Primary action color. Contrast on bg-base: 5.5:1 ✅ AA */ --brand-hover: #4A9EFF; /* Hover state — lifts brighter rather than darker on dark. */ --brand-deep: #1F3A66; /* Original 2011 navy — lives on as atmospheric depth: hero glow, skyline silhouettes, deep card shadows. NOT used for text or CTAs on dark. */ --brand-grey: #757A7F; /* Neutral supporting grey — baked into partner-logo silhouettes. Contrast on bg-base: 3.9:1 ✅ AA-large/UI. Available as accent for muted UI chrome. */ --wordmark-fiber: #E8EDF5; /* FIBER tspan fill in the wordmark — bright on dark BG, matches text-primary. */ --brand-glow: rgba(45, 139, 250, 0.15); /* Radial hero glow, focus rings */ --on-brand: #FFFFFF; /* Text on filled brand backgrounds */ /* Status (consistent across modes) ------------------------------------- */ --success: #22C55E; /* Form success, included checkmarks. Contrast: 8.3:1 ✅ AAA */ --danger: #EF4444; /* Form errors, removed items. Contrast: 5.8:1 ✅ AA */ --warning: #F59E0B; /* Soft warnings, hot specs. Contrast: 7.4:1 ✅ AAA */ } /* ----- Light theme (accessibility fallback, same design system) -------------- */ html.light { color-scheme: light; /* Surfaces */ --bg-base: #FAFBFD; --bg-elev: #FFFFFF; --bg-card: #F4F6FA; --border: #E1E6EE; --border-strong: #C8D2E0; --shadow-rgb: 31, 58, 102; /* navy-tinted shadows — brand atmosphere */ /* Text */ --text-primary: #0F1620; /* Contrast on bg-base: 17.1:1 ✅ AAA */ --text-secondary: #5A6678; /* Contrast on bg-base: 6.5:1 ✅ AAA */ --text-tertiary: #8A95A8; /* Contrast on bg-base: 3.4:1 ✅ AA-large/UI */ /* Brand — shifts deeper for white-bg contrast (theme-aware brand token) */ --brand: #1F7BE6; /* Contrast on bg-base: 4.7:1 ✅ AA — passes for small text */ --brand-hover: #1668CC; --brand-deep: #1F3A66; /* Original navy works as intended on light bg */ --brand-grey: #757A7F; /* Same shade across themes — neutral enough to read on both. Contrast on light bg: 4.2:1 ✅ AA. */ --wordmark-fiber: #56595D; /* FIBER tspan fill in the wordmark — deep grey that pairs with HUB blue without going full black. Contrast on bg-base: ~7:1 ✅ AAA. */ --brand-glow: rgba(31, 123, 230, 0.1); --on-brand: #FFFFFF; /* Status — slightly deeper for white-bg contrast */ --success: #16A34A; --danger: #DC2626; --warning: #D97706; } /* ============================================================================= Typography ============================================================================= */ :root { /* Family --------------------------------------------------------------- */ --font-body: "ProximaNova-Regular", "Proxima Nova", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif; --font-display: "ProximaNova-Bold", "Proxima Nova", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Tabular numerals — for pricing, specs, IPs, ASNs, port counts. */ /* Preserves the "Rawline" trick from current FH stylesheet: */ /* .price, .count, .specs, table, sup { font-variant-numeric: tabular-nums; } */ /* Type scale (rem-based, modular ~1.25 ratio for display, 1.125 for body) */ --fs-micro: 0.75rem; /* 12px — eyebrows, legal, captions */ --fs-small: 0.875rem; /* 14px — fine print, UI labels */ --fs-body: 1.0625rem; /* 17px — body text. Bumped from current 16px for confidence. */ --fs-body-lg: 1.1875rem; /* 19px — lead paragraphs, hero subhead */ --fs-h6: 1rem; /* 16px */ --fs-h5: 1.25rem; /* 20px */ --fs-h4: 1.5rem; /* 24px */ --fs-h3: 1.875rem; /* 30px */ --fs-h2: 2.5rem; /* 40px */ --fs-h1: 3.15rem; /* 50.4px desktop — reduced 10% from 3.5rem on user feedback */ /* Fluid H1 — ~32px mobile → ~50px desktop (10% smaller than prior 36→56) */ --fs-h1-fluid: clamp(2.025rem, 1.35rem + 3.375vw, 3.15rem); /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.1; /* H1, H2 — tight display */ --lh-snug: 1.25; /* H3-H6 */ --lh-normal: 1.5; /* Body */ --lh-relaxed: 1.7; /* Long-form prose, lead paragraphs */ /* Letter spacing */ --ls-tight: -0.02em; /* Display headlines */ --ls-normal: 0; --ls-eyebrow: 0.14em; /* Uppercase eyebrows — tracking-widest equivalent */ /* ===== Spacing scale (4px base, geometric) ============================ */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ /* ===== Radii ========================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ===== Motion ========================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 400ms; /* ===== Breakpoints (for reference — used in media queries below) ===== */ /* sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px */ /* ===== Container ===================================================== */ --container-max: 1280px; --container-px: var(--sp-5); /* horizontal padding */ } /* ============================================================================= Theme-toggle behavior — respect OS preference if user hasn't picked ============================================================================= */ @media (prefers-color-scheme: light) { html:not(.dark):not(.light) { color-scheme: light; --bg-base: #FAFBFD; --bg-elev: #FFFFFF; --bg-card: #F4F6FA; --border: #E1E6EE; --border-strong: #C8D2E0; --shadow-rgb: 31, 58, 102; --text-primary: #0F1620; --text-secondary: #5A6678; --text-tertiary: #8A95A8; --brand: #1F7BE6; --brand-hover: #1668CC; --brand-glow: rgba(31, 123, 230, 0.1); --success: #16A34A; --danger: #DC2626; --warning: #D97706; } } /* ============================================================================= Base resets — minimal, opinionated ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out); } /* Tabular numerals on numeric-heavy content */ .price, .count, .specs, table, sup, .stat-value, .tabular { font-variant-numeric: tabular-nums; }