/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║                  NUDGE — DESIGN TOKENS                      ║
 * ║                                                              ║
 * ║  Single source of truth for all visual values.              ║
 * ║  Change a token here → updates everywhere it's used.        ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

:root {

  /* ═══════════════════════════════════════════
     BRAND IDENTITY
     ═══════════════════════════════════════════
     Primary:    #4B4E80  slate-blue/indigo (buttons, active states, links)
     Background: #FFFFFF  clean white page base
     Text:       #1C1917  warm near-black headings + body
     Muted:      #78716C  warm grey captions + secondary text
  ═══════════════════════════════════════════ */

  /* ─────────────────────────────────────────────
     SURFACES
     ───────────────────────────────────────────── */
  --app-background:        #FFFFFF;
  --background:            #FFFFFF;   /* cards, modals, nav pill */
  --card-background:       #FFFFFF;
  --hero-card-bg:          #FCFCFA;   /* hero feature card group */

  /* ─────────────────────────────────────────────
     SECTION BACKGROUND PALETTE
     Each major section has a named surface token.
     Use these on <section> elements for consistency.
     ───────────────────────────────────────────── */
  --section-bg-default:    #FFFFFF;   /* most sections — white */
  --section-bg-features:   #EEF1FA;   /* features section — soft lavender */
  --section-bg-testimonials: #F7F9E8; /* testimonials — light yellow-green */
  --section-bg-cta:        #F9F8A9;   /* closing CTA — pale yellow */

  /* Why-switch card surface colors */
  --card-bg-green-yellow:  #E8EEB6;   /* "No team" card */
  --card-bg-neutral:       #F8F8F7;   /* "No time" card */
  --card-bg-blue:          #C7D8FE;   /* "On brand" card */

  /* Email marquee card backgrounds */
  --marquee-card-sand:     #EDE4D8;
  --marquee-card-blue:     #D8DFEE;
  --marquee-card-sage:     #D2DEC9;
  --marquee-card-rose:     #E8CECE;
  --marquee-card-lavender: #DDD9EE;
  --marquee-card-terracotta: #EDD8CC;
  --marquee-card-slate:    #C8D0DC;
  --marquee-card-mauve:    #EEDADD;

  /* ─────────────────────────────────────────────
     TEXT COLOURS
     ───────────────────────────────────────────── */
  --foreground:            #1C1917;   /* primary text */
  --muted-foreground:      #78716C;   /* captions / secondary */
  --primary-foreground:    #FAFAF9;   /* text on primary-coloured surfaces */
  --secondary-foreground:  #292524;

  /* ─────────────────────────────────────────────
     BRAND PRIMARY — Nudge slate-blue
     ───────────────────────────────────────────── */
  --primary:               #4B4E80;
  --primary-dark:          #3a3d65;   /* hover / active */

  /* ─────────────────────────────────────────────
     HERO GRADIENT — sunrise glow
     Radial ellipse centred at 50% 36% (behind heading)
     ───────────────────────────────────────────── */
  --hero-glow-core:        #FBBF24;
  --hero-glow-mid:         rgba(251,191,36,0.85);
  --hero-glow-fade:        rgba(250,189,0,0.45);
  --hero-glow-edge:        rgba(253,211,77,0.12);

  /* ─────────────────────────────────────────────
     NEUTRAL SCALE
     ───────────────────────────────────────────── */
  --secondary:             #F5F5F4;
  --muted:                 #F5F5F3;
  --accent:                #F0F0EE;   /* hover bg on ghost elements */

  /* ─────────────────────────────────────────────
     SEMANTIC / STATUS COLOURS
     ───────────────────────────────────────────── */
  --destructive:           #DC2626;
  --orange:                #F97316;
  --orange-dark:           #EA580C;
  --green:                 #22C55E;
  --green-dark:            #16A34A;
  --blue:                  #3B82F6;
  --blue-dark:             #2563EB;

  /* ─────────────────────────────────────────────
     BORDERS & INPUTS
     ───────────────────────────────────────────── */
  --border:                #E7E5E4;
  --input:                 #E7E5E4;

  /* ─────────────────────────────────────────────
     DARK SECTION (used on CTA blocks with dark bg)
     ───────────────────────────────────────────── */
  --dark-section-bg:       #292524;
  --dark-section-fg:       #FAFAF9;

  /* ─────────────────────────────────────────────
     PROMPT CHIP COLOURS
     ───────────────────────────────────────────── */
  --chip-bg:               #EEF3FF;
  --chip-border:           #B8CCFA;
  --chip-hover-bg:         #C7D8FE;

  /* ═══════════════════════════════════════════
     TYPOGRAPHY SCALE
     ═══════════════════════════════════════════ */

  /* Font families */
  --font-body:             'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display:          'Urbanist', 'Inter', sans-serif;

  /* Font sizes (fluid via clamp where applicable) */
  --text-xs:               0.6875rem;   /* 11px — overlines, badges */
  --text-sm:               0.75rem;     /* 12px — small labels */
  --text-base:             0.875rem;    /* 14px — buttons, nav, fine print */
  --text-md:               0.9375rem;   /* 15px — card text, FAQ body */
  --text-body:             1rem;        /* 16px — body default */
  --text-lg:               1.0625rem;   /* 17px — section descriptions */
  --text-xl:               1.125rem;    /* 18px */
  --text-2xl:              1.25rem;     /* 20px — hero subtitle */
  --text-3xl:              1.5rem;      /* 24px — trust bar tagline */
  --text-section:          clamp(2rem, 4vw, 3.5rem);   /* section headings */
  --text-hero:             clamp(2.75rem, 6vw, 5.25rem); /* hero h1 */

  /* Font weights */
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;
  --weight-extrabold:      800;

  /* Line heights */
  --leading-tight:         1.1;   /* headings */
  --leading-snug:          1.2;   /* hero h1 */
  --leading-normal:        1.5;   /* body default */
  --leading-relaxed:       1.6;   /* descriptions */
  --leading-loose:         1.65;  /* FAQ body, card descriptions */

  /* Letter spacing */
  --tracking-tight:        -0.025em;   /* hero h1 */
  --tracking-normal:       0em;
  --tracking-wide:         0.04em;     /* badges */
  --tracking-wider:        0.1em;      /* overlines */

  /* ═══════════════════════════════════════════
     SPACING SCALE
     ═══════════════════════════════════════════ */

  /* Base spacing unit: 4px */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-14:              56px;
  --space-16:              64px;

  /* Section padding */
  --section-padding:       80px;   /* universal section vertical padding */
  --section-padding-lg:    80px;   /* alias */
  --section-padding-md:    60px;
  --section-padding-sm:    44px;
  --section-padding-dark:  52px;

  /* Component gaps */
  --gap-xs:                4px;
  --gap-sm:                8px;
  --gap-md:                16px;
  --gap-lg:                20px;
  --gap-xl:                24px;
  --gap-2xl:               32px;

  /* ═══════════════════════════════════════════
     SHAPE — BORDER RADIUS
     ═══════════════════════════════════════════ */
  --radius:                0.625rem;   /* 10px — base */
  --radius-sm:             6px;
  --radius-md:             8px;
  --radius-card:           12px;       /* email gallery, strategy cards */
  --radius-lg:             16px;       /* prompt box, infra cards */
  --radius-xl:             20px;       /* why-cards, email marquee, image wraps */
  --radius-full:           9999px;     /* pills, CTAs */

  /* ═══════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════ */
  --z-base:                1;
  --z-raised:              10;
  --z-sticky:              20;
  --z-overlay:             30;
  --z-modal:               40;
  --z-nav:                 50;
  --z-toast:               60;

  /* ═══════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════ */
  --content-max-width:     86rem;      /* 1376px — main content column */
  --content-max-width-ext: 90rem;      /* 1440px — extended (nav) */
  --gutter:                4rem;       /* 64px desktop gutter */

  /* ═══════════════════════════════════════════
     SHADOWS
     Warm-toned — all use rgba(41,37,36, …) base
     ═══════════════════════════════════════════ */
  --shadow-xs:             0 1px 2px rgba(41,37,36,0.05);
  --shadow-sm:             0 1px 3px rgba(41,37,36,0.08), 0 1px 2px rgba(41,37,36,0.06);
  --shadow-card:           0 1px 3px rgba(41,37,36,0.08), 0 4px 16px -4px rgba(41,37,36,0.10);
  --shadow-card-hover:     0 4px 24px -4px rgba(41,37,36,0.14);
  --shadow-nav:            0 1px 2px rgba(41,37,36,0.06), 0 0 0 1px rgba(41,37,36,0.03);
  --shadow-nav-scrolled:   0 2px 8px rgba(41,37,36,0.10), 0 0 0 1px rgba(41,37,36,0.06);
  --shadow-prompt:         0 1px 1px rgba(41,37,36,0.08), 0 0 0 1px rgba(41,37,36,0.04), 0 4px 16px -4px rgba(41,37,36,0.12);
  --shadow-hero-cards:     0 1px 1px rgba(41,37,36,0.10), 0 0 0 1px rgba(41,37,36,0.04), 0 2px 12px -4px rgba(41,37,36,0.16);
  --shadow-primary-btn:    0 1px 3px rgba(31,41,55,0.2), 0 0 0 1px var(--primary), inset 0 1px 0 rgba(255,255,255,0.12);
  --shadow-image-wrap:     0 1px 2px rgba(41,37,36,0.08), 0 0 0 1px rgba(41,37,36,0.03), 0 8px 40px -8px rgba(41,37,36,0.18);
  --shadow-primary-glow:   0 2px 12px rgba(75,78,128,0.30), 0 1px 3px rgba(75,78,128,0.18);
  --shadow-primary-glow-hover: 0 4px 20px rgba(75,78,128,0.38), 0 1px 4px rgba(75,78,128,0.22);

  /* ═══════════════════════════════════════════
     TRANSITIONS — standard durations
     ═══════════════════════════════════════════ */
  --transition-fast:       0.10s ease;
  --transition-base:       0.15s ease;
  --transition-slow:       0.28s cubic-bezier(0.34,1.56,0.64,1);  /* spring */
  --transition-reveal:     0.5s cubic-bezier(0.4, 0, 0.2, 1);     /* scroll reveal */
}