/* ============================================================
Galaxy Design Tokens — single source of truth for color,
typography, spacing, sizing, radius, shadow and component
defaults across every page (marketing site, auth, onboarding,
the app SPA, and admin).
Load this file FIRST, before any page-specific stylesheet, so
its variables are available to every rule that follows:
Consume tokens with var(--token-name) instead of hardcoding a
hex value, a pixel size, or a shadow. Changing a value here
changes it everywhere it's used — that's the whole point.
The brand tokens below (--color-primary/etc., --font-family-base)
reflect the NEW indigo/Plus Jakarta Sans design from the
candidate-portal-design mockup, rolled out page by page — a page
only picks up the new look once it's actually wired to this file
and its own CSS updated to consume these tokens (auth is first).
Pages not yet wired keep their own current hardcoded values
unchanged. Marketing- and admin-specific tokens further down
still capture THEIR current (unchanged) designs until their own
turn.
============================================================ */
:root {
/* ── Brand colors ──────────────────────────────────────────
Primary is the one accent used for CTAs, links and active
states everywhere. Secondary/tertiary are the two supporting
hues already in use for gradients and callouts (landing page
hero gradient, "reserved for future emphasis" amber). */
--color-primary: #4338CA;
--color-primary-hover: #362F92;
--color-primary-active: #241D5C;
--color-primary-subtle: rgba(67,56,202,0.08);
--color-primary-border: rgba(67,56,202,0.2);
--color-secondary: #F59E0B;
--color-secondary-hover: #D97706;
--color-secondary-subtle: rgba(245,158,11,0.12);
--color-tertiary: #10B981;
--color-tertiary-hover: #059669;
--color-tertiary-subtle: rgba(16,185,129,0.12);
--color-tertiary-glow: rgba(16,185,129,0.15);
/* Decorative "glow" tints (hero gradients, glassmorphism accents on the
marketing/auth pages) — a softer/wider spread than the UI-chrome
-subtle/-border tints above, so kept as their own tokens. */
--color-primary-glow: rgba(67,56,202,0.15);
--color-primary-glow-soft: rgba(67,56,202,0.06);
/* ── Background / surface (light theme — the shipped default) ──
-base is the page canvas, -surface is a raised card/panel,
-surface-alt is a secondary panel tone (e.g. a nested well
inside a card), -surface-sunken is for inset areas (inputs,
table headers), -overlay is the scrim behind modals/drawers. */
--color-bg-base: #F0F6FF;
--color-bg-surface: #FFFFFF;
--color-bg-surface-alt: #F8FAFF;
--color-bg-surface-sunken:#E2EAF8;
--color-bg-overlay: rgba(15,23,42,0.55);
/* The marketing/legal pages (index, about, privacy, terms, upgrade,
onboarding) use a plainer, unfinted neutral background rather than
the app SPA's blue-tinted one above — a real, deliberate difference
today, not an oversight, so it gets its own tokens rather than
reusing --color-bg-base and silently changing either page. */
--color-bg-marketing-base: #F8FAFC;
--color-bg-marketing-hover: #F1F5F9;
--color-border-marketing: #E2E8F0;
--color-border-marketing-strong: #CBD5E1;
/* ── Text ── */
--color-text-primary: #0F172A;
--color-text-secondary: #475569;
--color-text-tertiary: #94A3B8;
--color-text-on-accent: #FFFFFF;
--color-text-link: var(--color-primary);
--color-text-link-hover:var(--color-primary-hover);
/* ── Border / divider ── */
--color-border: #DBEAFE;
--color-border-strong: #BFDBFE;
--color-divider: var(--color-border);
/* ── Semantic (status) colors ──
Each has a foreground (text/icon) and a subtle background for
badges/banners, e.g. background: var(--color-success-bg). */
--color-success: #16A34A;
--color-success-bg: rgba(22,163,74,0.12);
--color-warning: #D97706;
--color-warning-bg: rgba(217,119,6,0.12);
--color-error: #DC2626;
--color-error-bg: rgba(220,38,38,0.1);
--color-info: var(--color-primary);
--color-info-bg: var(--color-primary-subtle);
/* ── Interactive states ──
Generic state overlays for anything that doesn't already have
its own hover/active color (e.g. a ghost button, a nav item).
Layer these as a background over the resting color. */
--state-hover-overlay: rgba(15,23,42,0.04);
--state-active-overlay: rgba(15,23,42,0.08);
--state-disabled-opacity: 0.5;
--state-focus-ring-color: var(--color-primary);
--state-focus-ring-width: 3px;
--state-focus-ring: 0 0 0 var(--state-focus-ring-width) var(--color-primary-subtle);
/* ── Typography ── */
--font-family-base: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 21px;
--font-size-3xl: 24px;
--font-size-4xl: 30px;
--font-size-5xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold:800;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-normal: 1.5;
--line-height-relaxed:1.65;
--letter-spacing-tight: -0.02em;
--letter-spacing-snug: -0.01em;
--letter-spacing-normal:0;
--letter-spacing-wide: 0.05em;
/* Heading / body shorthands — combine size + weight + line-height
for the common text roles. Apply the trio together, e.g.:
font-size: var(--text-h1-size); font-weight: var(--text-h1-weight);
line-height: var(--text-h1-leading); letter-spacing: var(--text-h1-tracking); */
--text-h1-size: var(--font-size-4xl); --text-h1-weight: var(--font-weight-extrabold); --text-h1-leading: var(--line-height-tight); --text-h1-tracking: var(--letter-spacing-tight);
--text-h2-size: var(--font-size-3xl); --text-h2-weight: var(--font-weight-extrabold); --text-h2-leading: var(--line-height-tight); --text-h2-tracking: var(--letter-spacing-tight);
--text-h3-size: var(--font-size-xl); --text-h3-weight: var(--font-weight-bold); --text-h3-leading: var(--line-height-snug); --text-h3-tracking: var(--letter-spacing-snug);
--text-h4-size: var(--font-size-lg); --text-h4-weight: var(--font-weight-bold); --text-h4-leading: var(--line-height-snug); --text-h4-tracking: var(--letter-spacing-normal);
--text-body-size: var(--font-size-base); --text-body-weight: var(--font-weight-regular); --text-body-leading: var(--line-height-normal);
--text-small-size: var(--font-size-sm); --text-small-weight: var(--font-weight-regular); --text-small-leading: var(--line-height-normal);
/* ── Spacing scale (4px base unit) ──
Use these for margin/padding/gap instead of one-off pixel
values. Named --space-N = N × 4px, so the scale reads the
same whether you think in "tokens" or in pixels. */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* ── Sizing ── */
--icon-size-sm: 14px;
--icon-size-md: 18px;
--icon-size-lg: 24px;
--control-height-sm: 34px;
--control-height-md: 40px;
--control-height-lg: 48px;
--sidebar-width: 256px;
--header-height: 64px;
--modal-max-width-sm: 420px;
--modal-max-width-md: 560px;
--modal-max-width-lg: 720px;
--content-max-width: 1200px;
/* ── Border ── */
--border-width-thin: 1px;
--border-width-thick: 2px;
--border-style: solid;
/* ── Radius ── */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 24px;
--radius-full: 999px;
/* Marketing-page-specific steps that don't land on the scale above. */
--radius-marketing-md: 12px;
--radius-marketing-lg: 18px;
/* ── Shadow / elevation ──
A 4-step elevation scale plus named shadows for specific
surfaces that don't map cleanly onto a step (dropdowns and
modals sit above everything, so they reuse the top step). */
--shadow-color: rgba(37,99,235,0.08);
--elevation-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(37,99,235,0.05);
--elevation-2: 0 4px 12px -2px rgba(15,23,42,0.07), 0 2px 6px rgba(37,99,235,0.05);
--elevation-3: 0 14px 30px -8px rgba(15,23,42,0.12), 0 4px 10px rgba(37,99,235,0.06);
--elevation-hover: 0 12px 28px -8px rgba(37,99,235,0.18), 0 3px 8px rgba(15,23,42,0.06);
--shadow-card: var(--elevation-1);
--shadow-dropdown: 0 22px 48px rgba(15,23,42,0.16);
--shadow-modal: 0 24px 64px var(--shadow-color);
/* Plain (non-blue-tinted) shadow scale used on the marketing pages,
alongside the blue-tinted --elevation-* scale used by the app SPA —
again a real existing difference, not a duplicate to collapse. */
--shadow-neutral-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-neutral-md: 0 4px 16px rgba(0,0,0,.08);
--shadow-neutral-lg: 0 8px 32px rgba(0,0,0,.1);
/* ── Breakpoints ──
Reference only — CSS custom properties cannot be used inside
an @media condition, so these document the canonical scale
for new/updated rules rather than driving @media directly.
(Existing @media rules across the codebase predate this file
and use a mix of one-off values; migrate them to this scale
as each page gets touched, rather than in one sweeping pass.) */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-wide: 1280px;
/* ── Transitions ── */
--transition-fast: 0.15s ease;
--transition-base: 0.2s cubic-bezier(.4,0,.2,1);
--transition-slow: 0.4s cubic-bezier(.4,0,.2,1);
/* ── Component tokens ──────────────────────────────────────
Semantic aliases built from the primitives above. A component
should reach for one of these before reaching for a primitive
token directly — it keeps e.g. "every button's height" a single
line to change instead of every consuming rule. */
/* Buttons */
--button-height-sm: var(--control-height-sm);
--button-height-md: var(--control-height-md);
--button-height-lg: var(--control-height-lg);
--button-radius: var(--radius-md);
--button-padding-x: var(--space-4);
--button-font-size: var(--font-size-base);
--button-font-weight: var(--font-weight-semibold);
--button-primary-bg: var(--color-primary);
--button-primary-bg-hover: var(--color-primary-hover);
--button-primary-fg: var(--color-text-on-accent);
--button-ghost-bg: var(--color-bg-surface);
--button-ghost-bg-hover: var(--color-bg-surface-alt);
--button-ghost-border: var(--color-border);
--button-ghost-fg: var(--color-text-primary);
/* Inputs / form fields */
--input-height: var(--control-height-md);
--input-radius: var(--radius-md);
--input-padding-x: var(--space-3);
--input-border: var(--color-border-strong);
--input-border-focus: var(--color-primary);
--input-bg: var(--color-bg-surface);
--input-font-size: var(--font-size-base);
--input-placeholder: var(--color-text-tertiary);
/* Cards */
--card-bg: var(--color-bg-surface);
--card-border: var(--color-border);
--card-radius: var(--radius-xl);
--card-padding:var(--space-5);
--card-shadow: var(--shadow-card);
--card-shadow-hover: var(--elevation-hover);
/* Navigation */
--nav-item-height: 42px;
--nav-item-radius: var(--radius-md);
--nav-item-gap: var(--space-3);
--nav-active-bg: var(--color-primary-subtle);
--nav-active-fg: var(--color-primary);
/* Modals / overlays */
--modal-radius: var(--radius-2xl);
--modal-padding: var(--space-6);
--modal-shadow: var(--shadow-modal);
--overlay-bg: var(--color-bg-overlay);
/* Tables */
--table-row-height: 52px;
--table-header-bg: var(--color-bg-surface-alt);
--table-border: var(--color-border);
--table-header-fg: var(--color-text-tertiary);
/* ── Auth page marketing panel ──
The dark indigo panel beside the sign-in/sign-up form (desktop
only — hidden on narrow viewports where the form takes the full
width). Gradient stops darken toward the bottom-left corner. */
--color-auth-panel-gradient-start: #4338CA;
--color-auth-panel-gradient-mid: #241D5C;
--color-auth-panel-gradient-end: #171246;
--color-auth-panel-eyebrow-fg: #B7B2F2;
--color-auth-panel-body-fg: #C9C4F2;
--color-auth-feature-card-bg: rgba(255,255,255,0.09);
--color-auth-feature-card-border: rgba(255,255,255,0.16);
--color-auth-feature-badge-bg: #FFFFFF;
--color-auth-feature-badge-fg: var(--color-primary);
/* ── App sidebar (dark nav shell) ──
The app SPA's own sidebar accent — kept as its own token (not
the shared --accent app.css's other, not-yet-reskinned sections
still use) so only the sidebar picks up the new indigo look for
now. Lighter/darker tints specific to the dark sidebar surface:
the active-item highlight and the plan-upgrade card's gradient. */
--color-sidebar-accent: var(--color-primary);
--color-sidebar-bg-start: #17181D;
--color-sidebar-bg-end: #0E0F12;
--color-sidebar-border: rgba(255,255,255,0.06);
--color-sidebar-text: #7C8BA5;
--color-sidebar-text-hover: #E2E8F0;
--color-sidebar-hover-bg: rgba(255,255,255,0.06);
--color-sidebar-active-bg: rgba(91,82,214,0.18);
--color-sidebar-active-fg: #B4AEF5;
--color-sidebar-section-label: rgba(255,255,255,0.35);
--color-sidebar-plan-card-start:#5B52D6;
--color-sidebar-plan-card-end: #14275A;
--color-sidebar-plan-label-fg: #B7B2F2;
--color-sidebar-plan-body-fg: #C9C4F2;
--color-sidebar-link-fg: #9691E8;
--color-sidebar-logo-gradient-start: #7C74E0;
/* ── Admin panel ──
Deliberately its own flat, monochrome "Stripe-sandbox" look — a
different accent (purple-blue, not the product's blue) and always
light regardless of the candidate app's theme toggle. Kept as its
own token set rather than aliased to --color-primary/etc. above,
since collapsing them would actually change the admin panel's
current appearance, not just centralize it. */
--color-admin-bg: #F6F8FB;
--color-admin-surface: #FFFFFF;
--color-admin-surface-hover: #F8FAFC;
--color-admin-text-1: #1A1F36;
--color-admin-text-2: #425466;
--color-admin-text-3: #8792A2;
--color-admin-text-4: #B1B9C4;
--color-admin-border: #E6EAEE;
--color-admin-border-2: #D4DAE0;
--color-admin-accent: #635BFF;
--color-admin-accent-hover: #4A44E0;
--color-admin-accent-subtle: rgba(99,91,255,0.08);
--color-admin-success-bg: #D7F7E3;
--color-admin-success-fg: #006908;
--color-admin-warning-bg: #FEF3D8;
--color-admin-warning-fg: #7A4F01;
--color-admin-error-bg: #FFE3E3;
--color-admin-error-fg: #B91C1C;
--radius-admin-sm: 8px;
--radius-admin-lg: 12px;
--shadow-admin: 0 1px 3px rgba(15,23,42,0.05);
--shadow-admin-pop: 0 8px 24px rgba(15,23,42,0.08);
}
/* ── Dark theme overrides ──
Everything not redeclared here (typography scale, spacing,
radius, component sizing) is theme-agnostic and inherited as-is
from :root — only color values change between themes. */
[data-theme="dark"] {
--color-bg-base: #09090B;
--color-bg-surface: #18181B;
--color-bg-surface-alt: #27272A;
--color-bg-surface-sunken: #3F3F46;
--color-bg-overlay: rgba(0,0,0,0.6);
--color-text-primary: #FAFAFA;
--color-text-secondary: #A1A1AA;
--color-text-tertiary: #71717A;
--color-border: #27272A;
--color-border-strong: #3F3F46;
--color-primary-subtle: rgba(67,56,202,0.16);
--color-primary-border: rgba(67,56,202,0.35);
--shadow-color: rgba(0,0,0,0.4);
--elevation-1: 0 1px 2px rgba(0,0,0,0.35);
--elevation-2: 0 4px 14px rgba(0,0,0,0.40);
--elevation-3: 0 14px 34px rgba(0,0,0,0.50);
--elevation-hover: 0 12px 30px rgba(0,0,0,0.55);
--shadow-dropdown: 0 22px 48px rgba(0,0,0,0.5);
--shadow-modal: 0 24px 64px var(--shadow-color);
--button-ghost-bg-hover: var(--color-bg-surface-alt);
}