/* ============================================================
   ReviewFlow Design Tokens — single source of truth
   Dark industrial-refined: hi-vis orange on near-black.
   ============================================================ */
:root {
  /* ---- Surfaces ---- */
  --surface-0: #0A0A0F;          /* page background */
  --surface-1: #12121A;          /* cards */
  --surface-2: #1A1A26;          /* raised cards, inputs */
  --border: #262635;             /* default border */
  --border-strong: #34344A;      /* hover/active border */

  /* ---- Brand ---- */
  --orange: #FF6B00;             /* CTAs, section labels, key numbers ONLY */
  --orange-bright: #FF8A33;      /* hover, focus ring */
  --orange-soft: rgba(255, 107, 0, 0.10);   /* tinted washes */
  --ink-on-orange: #140D06;      /* text on orange — 6.9:1, hi-vis vest print */

  /* ---- Text (all pass WCAG AA on surface-0/1/2) ---- */
  --text: #F2F2F7;               /* 17.7:1 */
  --text-secondary: #A9A9BC;     /*  8.6:1 */
  --text-muted: #8B8B9F;         /*  5.9:1 */

  /* ---- Semantic ---- */
  --green: #22C55E;
  --green-soft: rgba(34, 197, 94, 0.12);
  --red: #EF4444;
  --red-soft: rgba(239, 68, 68, 0.10);
  --star-gold: #FBBF24;

  /* ---- Type ---- */
  --font-display: 'Barlow Condensed', sans-serif;  /* 700/800, H1/H2/labels/buttons only */
  --font-body: 'Source Sans 3', sans-serif;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.35rem;
  --text-xl: 1.7rem;
  --text-2xl: 2.1rem;
  --text-3xl: clamp(2.1rem, 4vw, 2.9rem);
  --text-display: clamp(2.75rem, 6vw, 4.75rem);

  /* ---- Space (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --section-pad: clamp(64px, 10vw, 112px);
  --container: 1200px;

  /* ---- Shape & depth ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-cta: 0 8px 28px rgba(255, 107, 0, 0.25);
  --focus-ring: 2px solid var(--orange-bright);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 150ms;
  --speed-base: 250ms;
}

/* ============================================================
   LEGACY ALIASES — used only by pre-refresh landing.css/setup.css.
   Delete this block once Phases 2–3 land.
   ============================================================ */
:root {
  --orange-hover: #FF8A33;
  --orange-glow: rgba(255, 107, 0, 0.35);
  --dark: #0A0A0F;
  --dark-card: #12121A;
  --dark-border: #1E1E2A;
  --dark-surface: #16161F;
  --white: #FFFFFF;
  --grey-100: #F0F0F5;
  --grey-300: #A0A0B0;
  --grey-500: #6B6B7B;
  --green-glow: rgba(34, 197, 94, 0.2);
}