/* =====================================================
   OpportuCity Design Tokens — css/variables.css
   Import BEFORE Tailwind: <link rel="stylesheet" href="css/variables.css">
===================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────── */
  --clr-primary: #0c2461; /* Deep Navy       */
  --clr-primary-light: #1e3799; /* Royal Blue      */
  --clr-primary-dark: #061540; /* Midnight Navy   */
  --clr-primary-tint: #e8ebf5; /* Ice Blue        */

  --clr-accent: #f9a825; /* Golden Amber    */
  --clr-accent-light: #fff8e1; /* Amber Glow      */
  --clr-accent-dark: #e65100; /* Deep Amber      */
  --clr-accent-muted: #ffc107; /* Soft Gold       */

  --clr-secondary: #2c3e50; /* Warm Slate      */
  --clr-secondary-light: #576574; /* Slate Mid       */
  --clr-secondary-tint: #bdc3c7; /* Light Slate     */

  /* ── Semantic / Functional ────────────────────── */
  --clr-success: #1b7f4b;
  --clr-success-bg: #e6f4ed;
  --clr-warning: #e65100;
  --clr-warning-bg: #fff3e0;
  --clr-danger: #c0392b;
  --clr-danger-bg: #fdecea;
  --clr-info: #1565c0;
  --clr-info-bg: #e3f2fd;

  /* ── Neutral Scale ─────────────────────────────── */
  --clr-white: #ffffff;
  --clr-surface: #f4f6fa;
  --clr-surface-alt: #eef1f8;
  --clr-border: #dde3ef;
  --clr-border-strong: #b0bed4;
  --clr-text-heading: #0c2461;
  --clr-text-body: #2c3e50;
  --clr-text-muted: #576574;
  --clr-text-inverse: #ffffff;
  --clr-text-accent: #f9a825;

  /* ── Typography ─────────────────────────────────  */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  /* ── Spacing Scale ──────────────────────────────── */
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* ── Border Radius ──────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(12, 36, 97, 0.04);
  --shadow-sm: 0 2px 8px rgba(12, 36, 97, 0.07);
  --shadow-md: 0 4px 16px rgba(12, 36, 97, 0.1);
  --shadow-lg: 0 8px 32px rgba(12, 36, 97, 0.14);
  --shadow-xl: 0 16px 48px rgba(12, 36, 97, 0.18);
  --shadow-glow: 0 0 24px rgba(249, 168, 37, 0.3); /* Gold glow for CTAs */

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-Index Scale ───────────────────────────────── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Layout ──────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 1.5rem; /* 24px side padding */
  --section-py: 5rem; /* 80px vertical section padding */
  --nav-height: 72px;
}

/* ── Dark Surface Overrides ────────────────────────── */
/* Apply to sections with bg = var(--clr-primary) or --clr-primary-dark */
.surface-dark {
  --clr-text-heading: #ffffff;
  --clr-text-body: #bdc3c7;
  --clr-text-muted: #899bb5;
  --clr-border: rgba(255, 255, 255, 0.12);
}