/* ============================================================
GalaxyWarden Design Tokens — tokens.css
Single source of truth for colors, type, spacing, radii, shadows.
Created WS10.75 (T0.2) — prerequisite for Tier 3 design-system application.
USAGE
-----
Load this file once, globally, BEFORE any page-specific stylesheet so
every downstream rule can `var(--gw-...)` the tokens.
TOKEN NAMING
------------
--gw-c-* colors (semantic, not "red"/"blue")
--gw-ff-* font families (sans, mono)
--gw-fs-* font sizes (xs…5xl, px values quantized)
--gw-fw-* font weights
--gw-lh-* line heights
--gw-r-* border radii (sm/md/full only)
--gw-shadow-* box shadows (3 elevations)
--gw-sp-* spacing (4px base, 8pt scale)
--gw-dur-* durations (motion)
--gw-ease-* easings (motion)
--gw-z-* z-indices (named layers)
MIGRATION POLICY
----------------
1. New CSS uses `var(--gw-*)` exclusively.
2. Legacy rules may stay until their page is touched; replace token-by-token
during normal page work. Never do a global find-replace — that breaks
the A/B experiments running on colors in the homepage hero.
3. If you need a value not in this file, ADD it here first, then use it.
Do not hardcode.
Last updated: 2026-05-05 (WS12.79 — added bg-mid/soft, text-secondary/
ghost, --gw-r-lg, --gw-blur-*, --gw-bp-*, --gw-fs-fluid-* fluid type)
============================================================ */
:root {
/* ───── Color: surfaces ───── */
--gw-c-bg-deepest: #050714; /* body background, void */
--gw-c-bg-base: #0a0b0d; /* default surface */
--gw-c-bg-mid: #0c1019; /* mid-depth surface (added WS12.79) */
--gw-c-bg-soft: #101520; /* soft surface, above base below card (WS12.79) */
--gw-c-bg-card: rgba(15, 23, 42, 0.6); /* card surface (transparent over base) */
--gw-c-bg-card-solid: #0f172a; /* solid card variant when transparency isn't an option */
--gw-c-bg-elev: #1e293b; /* elevated/hover card */
/* ───── Color: text hierarchy ───── */
--gw-c-text-primary: #e2e8f0; /* body copy, H1 */
--gw-c-text-strong: #f1f5f9; /* emphasized body, strong */
--gw-c-text-secondary: #cbd5e1; /* between strong and muted (WS12.79) */
--gw-c-text-muted: #94a3b8; /* secondary meta, captions */
--gw-c-text-dim: #64748b; /* tertiary, deprecated/quiet */
--gw-c-text-ghost: #475569; /* deepest dim, near-disabled (WS12.79) */
--gw-c-text-invert: #0a0b0d; /* text on light backgrounds (rare) */
/* ───── Color: borders ───── */
--gw-c-border-strong: #334155;
--gw-c-border: rgba(148, 163, 184, 0.2);
--gw-c-border-subtle: rgba(148, 163, 184, 0.1);
/* ───── Color: brand primaries ─────
Red = site-wide brand / threat / primary action.
Purple = /doxxscan/ad/ ad-variant primary (intentionally distinct —
see AUDIT_2026-04-21_harsh.md + WS10.74). */
--gw-c-red-50: #fef2f2;
--gw-c-red-100: #fecaca;
--gw-c-red-400: #f87171;
--gw-c-red-500: #ef4444; /* brand primary (threat/action) */
--gw-c-red-600: #dc2626; /* brand primary hover */
--gw-c-red-700: #b91c1c;
--gw-c-purple-400: #818cf8;
--gw-c-purple-500: #6366f1; /* ad-variant primary */
--gw-c-purple-600: #4338ca;
/* ───── Color: semantic ───── */
--gw-c-success-400: #34d399;
--gw-c-success-500: #10b981;
--gw-c-success-bg: rgba(16, 185, 129, 0.08);
--gw-c-warning-400: #fbbf24;
--gw-c-warning-500: #f59e0b;
--gw-c-danger: var(--gw-c-red-500); /* alias — "danger" reads better than "red" semantically */
--gw-c-threat-bg: rgba(239, 68, 68, 0.06);
--gw-c-threat-border: rgba(239, 68, 68, 0.22);
/* ───── Typography: families ─────
Goal: exactly 2 families site-wide. Every prior Times/Arial/bare-system-ui
stack collapses into one of these. */
--gw-ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--gw-ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
/* ───── Typography: sizes (quantized; 9 steps) ─────
Prior state: 36 distinct font sizes on homepage alone, many fractional
(7.2px, 7.68px, 8.32px) from calc()/transform. Collapse to these. */
--gw-fs-xs: 0.75rem; /* 12px — legal, micro-copy, timestamps */
--gw-fs-sm: 0.875rem; /* 14px — body small, consent notes */
--gw-fs-base: 1rem; /* 16px — body default */
--gw-fs-md: 1.125rem; /* 18px — lead paragraph */
--gw-fs-lg: 1.25rem; /* 20px — small heading, H4 */
--gw-fs-xl: 1.5rem; /* 24px — H3 */
--gw-fs-2xl: 2rem; /* 32px — H2 */
--gw-fs-3xl: 2.5rem; /* 40px — H1 secondary */
--gw-fs-4xl: 3rem; /* 48px — hero H1 max */
/* ───── Typography: weights ───── */
--gw-fw-normal: 400;
--gw-fw-medium: 500;
--gw-fw-semibold: 600;
--gw-fw-bold: 700;
--gw-fw-heavy: 800;
--gw-fw-black: 900;
/* ───── Typography: line heights ───── */
--gw-lh-tight: 1.15; /* H1/H2 — tight display */
--gw-lh-snug: 1.3; /* H3/H4 */
--gw-lh-normal: 1.5; /* body default */
--gw-lh-relaxed: 1.65; /* long-form body */
/* ───── Radii (3 steps) ─────
Prior state: 15 distinct border-radius values including asymmetric
(`0px 8px 8px 0px`, `12px 12px 12px 4px`). Collapse to these. */
/* WS12.155 — Pill-style pivot. sm/md now resolve to full-pill values for
inputs, buttons, toggles, OAuth buttons, badges. lg bumped to 22px for
cards/panels (still bounded, not full pill, to preserve content chunking).
If a future surface genuinely needs the OLD smaller radius, use raw px. */
--gw-r-sm: 999px; /* WS12.155 was 6px — chips, inputs, small buttons (now pill) */
--gw-r-md: 999px; /* WS12.155 was 10px — buttons, large interactive elements (now pill) */
--gw-r-lg: 22px; /* WS12.155 was 14px — cards / panels (rounded but bounded) */
--gw-r-xl: 28px; /* WS12.155 NEW — outer card / hero shells */
--gw-r-full: 999px; /* pills, circle badges */
/* ───── Shadows (3 elevations) ─────
Prior state: 33 distinct box-shadow declarations on /pricing alone.
Collapse to these three semantic tiers. */
--gw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08);
--gw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.12);
--gw-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
/* brand-tinted shadow for primary-red emphasis (buttons, card glows) */
--gw-shadow-red: 0 8px 28px rgba(220, 38, 38, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
--gw-shadow-purple: 0 8px 28px rgba(99, 102, 241, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
--gw-shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.4); /* nav / glass-card chrome (WS12.79) */
/* ───── Spacing (8pt scale on 4px base) ───── */
--gw-sp-0: 0;
--gw-sp-1: 0.25rem; /* 4px */
--gw-sp-2: 0.5rem; /* 8px */
--gw-sp-3: 0.75rem; /* 12px */
--gw-sp-4: 1rem; /* 16px */
--gw-sp-5: 1.25rem; /* 20px */
--gw-sp-6: 1.5rem; /* 24px */
--gw-sp-7: 1.75rem; /* 28px (added WS12.81 — common card padding-y) */
--gw-sp-8: 2rem; /* 32px */
--gw-sp-10: 2.5rem; /* 40px */
--gw-sp-12: 3rem; /* 48px */
--gw-sp-16: 4rem; /* 64px */
--gw-sp-24: 6rem; /* 96px — section padding */
--gw-sp-32: 8rem; /* 128px — extra-large section padding (WS12.79) */
/* ───── Motion ───── */
--gw-dur-fast: 120ms;
--gw-dur-base: 200ms;
--gw-dur-slow: 400ms;
--gw-ease-out: cubic-bezier(0, 0, 0.2, 1);
--gw-ease-in: cubic-bezier(0.4, 0, 1, 1);
--gw-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
/* ───── Z-index layers (named) ───── */
--gw-z-below: -1;
--gw-z-base: 0;
--gw-z-raised: 10;
--gw-z-dropdown: 50;
--gw-z-sticky: 95; /* matches existing .gw-mobile-cta */
--gw-z-nav: 100;
--gw-z-modal: 1000;
--gw-z-toast: 2000;
/* ───── Layout ───── */
--gw-content-max: 1100px; /* most content sections */
--gw-page-max: 1280px; /* page-width max */
--gw-prose-max: 720px; /* long-form prose / single-column */
--gw-form-max: 540px; /* centered forms / hero input */
/* ───── Focus ─────
Every focusable element should inherit a ring from this token so tabbing
through the page is visible without per-component CSS. */
--gw-ring: 0 0 0 3px rgba(239, 68, 68, 0.35);
--gw-ring-purple: 0 0 0 3px rgba(99, 102, 241, 0.35);
/* ───── Glass / backdrop-blur effects (WS12.79) ─────
Homepage has been using --glass-blur: 12px; standardize and add
stronger variant for nav. */
--gw-blur-sm: 8px;
--gw-blur-md: 12px;
--gw-blur-lg: 20px;
/* ───── Breakpoints (WS12.79) ─────
CSS variables don't work inside @media queries directly, but these
document the canonical breakpoints for the project. Use these px
values verbatim in @media rules to enforce mobile-first responsive
design. Tailwind-aligned. */
--gw-bp-sm: 480px; /* small phone landscape; large phone portrait */
--gw-bp-md: 768px; /* tablet portrait */
--gw-bp-lg: 1024px; /* tablet landscape; small desktop */
--gw-bp-xl: 1280px; /* standard desktop */
--gw-bp-2xl: 1536px; /* large desktop */
/* ───── Fluid type scale via clamp() (WS12.79) ─────
Use these for hero/H1/H2 to scale smoothly between mobile and desktop
without breakpoint-step jank. Fall back to fixed sizes below for body
copy where predictable line-counts matter. */
--gw-fs-fluid-hero: clamp(2rem, 6vw, 3.5rem); /* 32→56px hero H1 */
--gw-fs-fluid-h1: clamp(1.75rem, 5vw, 3rem); /* 28→48px page H1 */
--gw-fs-fluid-h2: clamp(1.5rem, 3.5vw, 2.25rem); /* 24→36px section H2 */
--gw-fs-fluid-h3: clamp(1.25rem, 2.5vw, 1.5rem); /* 20→24px H3 */
--gw-fs-fluid-lead: clamp(1rem, 1.8vw, 1.125rem); /* lead-paragraph */
--gw-fs-fluid-body: clamp(0.95rem, 1.6vw, 1.05rem); /* body copy */
}
/* ============================================================
Reduced-motion respects user OS setting.
Every token-backed animation should degrade gracefully.
============================================================ */
@media (prefers-reduced-motion: reduce) {
:root {
--gw-dur-fast: 0.01ms;
--gw-dur-base: 0.01ms;
--gw-dur-slow: 0.01ms;
}
}
/* ============================================================
WS10.117 — Mobile tap-target enforcement
Apple HIG + WCAG 2.1 SC 2.5.5 minimum: 44×44 pts (iOS) / 48×48 dp (Material).
Applied at ≤600px breakpoint to anything primary-actionable.
============================================================ */
@media (max-width: 600px) {
a.gw-nav-cta,
a.gw-mobile-cta,
a.gw-adl-mobile-cta,
a.gw-universal-mobile-cta,
a.cta-primary,
a.cta-secondary,
.btn-primary,
.btn-cta,
button[type="submit"],
.search-go,
.adl-btn,
.ft-cta-btn,
.compare-cta a {
min-height: 44px;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding-top: 12px;
padding-bottom: 12px;
}
}
/* ════════════════════════════════════════════════════════════════════════
WS12.141 — Canonical card pattern.
Single source of truth for card surfaces. Use this as a base; layer
accent borders/shadows for specialty cards (popular, elite, enterprise).
Replaces inconsistent stat-card / price-card / tier-card / cyber-card
variants that accumulated across pivots.
════════════════════════════════════════════════════════════════════════ */
.gw-card {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--gw-r-md, 12px);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
padding: var(--gw-sp-6, 24px);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gw-card:hover {
border-color: rgba(148, 163, 184, 0.32);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}
.gw-card--popular {
border: 1.5px solid rgba(239, 68, 68, 0.45);
box-shadow: 0 8px 32px rgba(220,38,38,0.18), 0 0 0 1px rgba(239,68,68,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.gw-card--popular:hover {
border-color: rgba(239, 68, 68, 0.65);
box-shadow: 0 12px 40px rgba(220,38,38,0.28), 0 0 0 1px rgba(239,68,68,0.12), inset 0 1px 0 rgba(255,255,255,0.07);
}
.gw-card--gold {
border: 1.5px solid rgba(251, 191, 36, 0.32);
box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(251,191,36,0.06);
}
.gw-card--gold:hover {
border-color: rgba(251, 191, 36, 0.55);
box-shadow: 0 12px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(251,191,36,0.08);
}
/* WS12.141 — alias legacy card classes to inherit the canonical surface,
so existing markup gets the polish without HTML changes. Specialty
accent classes still apply on top. */
.stat-card, .price-card, .tier-card, .cyber-card,
.feature-card, .threat-card, .compare-card {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--gw-r-md, 12px);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover, .price-card:hover, .tier-card:hover, .cyber-card:hover,
.feature-card:hover, .threat-card:hover, .compare-card:hover {
border-color: rgba(148, 163, 184, 0.32);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* ════════════════════════════════════════════════════════════════════════
WS12.142 — GALAXY PALETTE (canonical brand colors).
Strategy:
- Galaxy palette (cyan → indigo → violet) = BRAND container surfaces.
Used for: H1 brand keyword, primary subscription CTAs, top nav CTA,
enterprise CTA, footer CTAs, dashboard chrome, brand pills.
- Red palette = THREAT/SCAN semantic. Used for: DoxxScan scan action,
breach result displays, /protection threat indicators, exit-intent
warning, scariest-breach badges.
- Emerald = success / trust signals. Used for: trust pills, '$0 today'
badges, security checkmarks.
- Gold = enterprise / B2B differentiation. Used for: Enterprise tier
card on /pricing, Enterprise nav link, premium accents.
Why: red as primary brand color triggers anxiety + signals 'warning
product' instead of 'protective platform'. Mature security brands
(1Password, Stripe, Auth0, Linear, Cloudflare dashboard) all use cool
tones for the BRAND container; warm tones reserved for threat/alert.
════════════════════════════════════════════════════════════════════════ */
:root {
/* Galaxy palette — primary brand */
--gw-c-galaxy-cyan-light: #67e8f9; /* cyan-300 */
--gw-c-galaxy-cyan: #22d3ee; /* cyan-400 — hero anchor */
--gw-c-galaxy-cyan-dark: #06b6d4; /* cyan-500 */
--gw-c-galaxy-indigo: #818cf8; /* indigo-400 — middle stop */
--gw-c-galaxy-violet: #a78bfa; /* violet-400 */
--gw-c-galaxy-violet-light:#c084fc; /* violet-300 — bright end */
/* Canonical brand gradients */
--gw-grad-galaxy: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #a78bfa 100%);
--gw-grad-galaxy-bright: linear-gradient(135deg, #67e8f9 0%, #22d3ee 30%, #a78bfa 70%, #c084fc 100%);
--gw-grad-galaxy-h1: linear-gradient(135deg,#67e8f9 0%,#a5f3fc 28%,#e9d5ff 58%,#f5d0fe 80%,#fae8ff 100%);
/* Glow halos for galaxy CTAs */
--gw-glow-galaxy: 0 0 14px rgba(34, 211, 238, 0.45);
--gw-shadow-galaxy: 0 8px 24px rgba(129, 140, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
--gw-shadow-galaxy-hover: 0 12px 32px rgba(129, 140, 248, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
/* Threat palette — kept for semantic use only (scan/breach/threat UI) */
--gw-grad-threat: linear-gradient(135deg, #ef4444, #dc2626);
--gw-shadow-threat: 0 8px 24px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* ════════════════════════════════════════════════════════════════════════
WS12.142 — BRAND-CTA SITE-WIDE GALAXY OVERRIDE LAYER
Strategy: hundreds of inline `background: linear-gradient(135deg, #ef4444, #dc2626)`
declarations across templates would take days to migrate manually + carry
regression risk. Instead, this layer overrides the canonical brand-CTA
selectors with galaxy gradient. Runs LAST (loaded via tokens.css preload),
so its rules cascade-win against earlier per-template inline backgrounds.
Specificity: uses class selectors so element-style attribute backgrounds
STILL win where intentional (e.g., specific threat-red CTAs that pass
`style="background:linear-gradient(135deg,#ef4444,#dc2626)"` directly).
This means: class-based brand CTAs pivot; explicit-inline-styled ones
stay as-authored. That's correct — explicit inline = author intent.
To force a specific class CTA back to red (e.g., a /protection threat
CTA that's class-based), add `.your-class { background: var(--gw-grad-threat) !important; }`.
════════════════════════════════════════════════════════════════════════ */
/* Top nav primary CTA — already inline-overridden in shared.py for the gw-nav-cta */
/* Pricing tier CTAs (Warden subscription) */
.tier-card .tier-cta:not([data-gw-cta-pay]):not(.tier-cta-pay):not(.tier-cta--threat) {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 16px rgba(129, 140, 248, 0.32) !important;
}
/* Generic pricing/subscription CTAs — homepage pricing card "Get Warden" */
.price-cta, .pricing-cta, .pricing-hero-cta, .pricing-sub-cta {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 16px rgba(129, 140, 248, 0.32) !important;
color: #fff !important;
}
.price-cta:hover, .pricing-cta:hover, .pricing-hero-cta:hover, .pricing-sub-cta:hover {
filter: brightness(1.06) saturate(1.05);
box-shadow: 0 8px 22px rgba(34, 211, 238, 0.45) !important;
}
/* Register / signup submit button */
.register-btn:not(.register-btn--threat),
button.gw-cta-primary, a.gw-cta-primary,
.signup-btn, .signup-cta, .auth-submit,
.submitBtn {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.42) !important;
color: #fff !important;
}
/* Footer subscribe / get-warden CTAs */
.ft-sub-btn, .ft-cta-btn:not(.ft-cta-btn--ghost), .footer-cta {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.32) !important;
color: #fff !important;
}
/* Mobile sticky bottom CTA */
.gw-mobile-cta-btn, .gw-universal-mobile-cta-btn,
.mobile-sticky-cta, [data-mobile-sticky-cta] {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.42) !important;
color: #fff !important;
}
/* Pre-Stripe interstitial — class-based fallback in case inline didn't apply */
.ts-cta {
background: var(--gw-grad-galaxy) !important;
}
/* Login submit + auth-flow primary action */
.login-btn, .login-submit, .auth-btn-primary {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.42) !important;
color: #fff !important;
}
/* Generic .gw-btn-primary — anywhere primary brand CTA */
.gw-btn-primary, button.gw-btn-primary, a.gw-btn-primary {
background: var(--gw-grad-galaxy) !important;
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.42) !important;
color: #fff !important;
}
/* Reset hover states for all brand CTAs to galaxy shadow */
.tier-cta:hover, .price-cta:hover, .pricing-cta:hover, .pricing-hero-cta:hover,
.register-btn:hover, .signup-btn:hover, .auth-submit:hover,
.ft-sub-btn:hover, .ft-cta-btn:hover, .footer-cta:hover,
.gw-mobile-cta-btn:hover, .gw-universal-mobile-cta-btn:hover,
.gw-btn-primary:hover {
box-shadow: 0 8px 22px rgba(34, 211, 238, 0.5) !important;
filter: brightness(1.06) saturate(1.05);
}
/* SEMANTIC EXCLUSIONS — these should STAY red because they're threat/scan UI */
.threat-cta, .breach-cta, .danger-cta, .scan-action-btn, .doxxscan-cta-red,
.upgrade-wall-cta--threat, .scariest-breach-cta {
background: var(--gw-grad-threat) !important;
box-shadow: var(--gw-shadow-threat) !important;
}