/* ================================================
   VARIABLES.CSS
   ------------------------------------------------
   All design tokens (colors, fonts, spacing) live
   here. Change a value once → updates everywhere.

   HOW TO EDIT:
   - To change brand color: update --teal
   - To change font size: update --text-* values
   - To change spacing: update --space-* values
================================================ */

:root {

  /* ── BRAND COLORS ─────────────────────────────
     Primary brand palette.
     --teal    : main CTA / highlight color
     --purple  : secondary accent
     --orange  : tertiary accent (step numbers etc)
     --pink    : gradient ending color
  ────────────────────────────────────────────── */
  --teal:        #0db88e;
  --teal-light:  #1ecba0;
  --purple:      #7c3aed;
  --orange:      #f97316;
  --pink:        #e879a8;
  --blue:        #3b82f6;

  /* ── NEUTRAL COLORS ───────────────────────────
     Used for text, borders, backgrounds
  ────────────────────────────────────────────── */
  --navy:        #0f172a;   /* darkest text */
  --navy2:       #1e293b;   /* dark text */
  --gray:        #64748b;   /* body / muted text */
  --border:      #e2e8f0;   /* card borders, dividers */
  --light:       #f8fafc;   /* light background */
  --white:       #ffffff;

  /* ── GRADIENTS ────────────────────────────────
     Reusable gradient strings
  ────────────────────────────────────────────── */
  --grad-primary:   linear-gradient(135deg, var(--teal), var(--purple));
  --grad-hero-bg:   linear-gradient(135deg, #f0fdf9 0%, #f5f3ff 50%, #fdf2f8 100%);
  --grad-teal-text: linear-gradient(90deg, var(--teal), var(--blue));
  --grad-purple-text: linear-gradient(90deg, var(--purple), var(--pink));

  /* ── TYPOGRAPHY ───────────────────────────────
     Font family & sizes
     Change --font-main to switch the whole font
  ────────────────────────────────────────────── */
  --font-main: 'Plus Jakarta Sans', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;

  /* ── SPACING ──────────────────────────────────
     Consistent spacing scale
  ────────────────────────────────────────────── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  56px;
  --space-2xl: 72px;
  --space-3xl: 96px;

  /* ── BORDER RADIUS ────────────────────────────
     Corner rounding
  ────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-pill: 50px;

  /* ── SHADOWS ──────────────────────────────────
     Box shadow presets
  ────────────────────────────────────────────── */
  --shadow-sm:  0 4px 16px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.10);

  /* ── TRANSITIONS ──────────────────────────────
     Animation speed
  ────────────────────────────────────────────── */
  --transition: 0.2s ease;
}