/* ==========================================================================
   TechRep Network — Design Tokens
   "Refined Dark Premium" — navy foundation, blue/green functional accents,
   warm gold reserved for premium/highlight moments only.
   ========================================================================== */

:root {
  /* ── Surfaces (depth scale, deepest → highest) ── */
  --surface-0: #060B14;   /* page edges, footer-adjacent, deepest recess */
  --surface-1: #0B1628;   /* base body background (was --navy) */
  --surface-2: #0F1D33;   /* card background */
  --surface-3: #142944;   /* elevated / hover card */
  --surface-4: #1C3555;   /* highest elevation — inputs-on-card, popovers */

  /* legacy aliases kept so nothing that still references the old names breaks */
  --navy: var(--surface-1);
  --navy-mid: var(--surface-2);
  --navy-light: var(--surface-4);

  /* ── Functional accents ── */
  --blue: #3B82F6;
  --blue-hover: #2563EB;
  --blue-soft: rgba(59, 130, 246, 0.14);
  --blue-glow: rgba(59, 130, 246, 0.35);

  --green: #10B981;
  --green-hover: #059669;
  --green-soft: rgba(16, 185, 129, 0.13);
  --green-glow: rgba(16, 185, 129, 0.32);

  /* ── Premium accent — used sparingly: top tiers, key emphasis, dividers ── */
  --gold: #D4A15F;
  --gold-hover: #C48F49;
  --gold-soft: rgba(212, 161, 95, 0.14);
  --gold-glow: rgba(212, 161, 95, 0.35);

  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.12);

  /* ── Text ── */
  --text: #F3F6FA;
  --text-secondary: #B9C4D4;
  --text-muted: #8493A8;

  /* ── Borders ── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-gold: rgba(212, 161, 95, 0.35);

  --card-bg: rgba(255, 255, 255, 0.035);
  --card-bg-hover: rgba(255, 255, 255, 0.055);

  /* ── Typography ── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Radius scale ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --radius: var(--radius-md); /* legacy alias */

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Shadows (layered: near + ambient) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32), 0 24px 64px rgba(0, 0, 0, 0.28);
  --shadow: var(--shadow-md); /* legacy alias */

  --glow-blue: 0 0 0 1px var(--blue-glow), 0 8px 28px -6px var(--blue-glow);
  --glow-green: 0 0 0 1px var(--green-glow), 0 8px 28px -6px var(--green-glow);
  --glow-gold: 0 0 0 1px var(--gold-glow), 0 8px 28px -6px var(--gold-glow);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 420ms;

  /* ── Misc ── */
  --container-max: 1160px;
  --z-nav: 100;
  --z-modal: 200;
  --z-grain: 300;
}