/* =========================================================================
   CIWA — DESIGN TOKENS  v1.1
   Colours sampled directly from the approved homepage design.
   Verify each against the Figma styles panel before launch — a PNG export
   is colour-shifted by compression, so treat these as accurate to ~1-2%.
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     1. BRAND PALETTE
     Six accent hues + neutral grounds. This is the whole system — if a
     colour is not in this list, it does not go on the site.
     --------------------------------------------------------------------- */

  /* Primary — nav, dark bands, footer, headings */
  --c-plum:         #6B1753;
  --c-plum-dark:    #55123F;
  --c-plum-light:   #8A2A6E;

  /* Accents — colour-code the audience circles */
  --c-magenta:      #E22371;
  --c-magenta-dark: #C11A5D;
  --c-orange:       #F68B3B;
  --c-orange-dark:  #DE7526;
  --c-coral:        #FE6E6E;
  --c-citron:       #AAA935;

  /* Grounds */
  --c-cream:        #FAFAF0;
  --c-blush:        #FEECEA;
  --c-peach:        #FEF0EF;
  --c-white:        #FFFFFF;

  /* Text */
  --c-ink:          #2B1524;
  --c-ink-muted:    #6A5560;
  --c-on-dark:      #FAFAF0;
  --c-on-dark-mut:  rgba(250, 250, 240, 0.78);

  /* Lines + focus */
  --c-line:         #E9DDE4;
  --c-line-dark:    rgba(250, 250, 240, 0.22);
  --c-focus:        #0B63CE;

  /* Semantic aliases — reference THESE in components, never the raw hues.
     Rebranding then touches one block instead of 400 rules. */
  --c-surface:      var(--c-cream);
  --c-surface-card: var(--c-white);
  --c-surface-alt:  var(--c-blush);
  --c-surface-dark: var(--c-plum);
  --c-action:       var(--c-magenta);
  --c-action-alt:   var(--c-orange);

  /* Circle colour rotation. Adjust assignment here, not per-widget. */
  --circle-1: var(--c-plum);
  --circle-2: var(--c-magenta);
  --circle-3: var(--c-magenta);
  --circle-4: var(--c-plum);
  --circle-5: var(--c-orange);
  --circle-6: var(--c-citron);
  --circle-7: var(--c-plum);
  --circle-8: var(--c-orange);
  --circle-9: var(--c-coral);

  /* ---------------------------------------------------------------------
     2. TYPE SCALE — fluid, 380px -> 1600px
     Your current build uses 27 distinct px values across 4 breakpoints.
     These 8 steps replace all of them. Set once on Elementor's DESKTOP
     tab; leave every other breakpoint tab EMPTY.
     --------------------------------------------------------------------- */
  --fs-display: clamp(2.00rem, 1.15rem + 3.58vw, 4.00rem);   /*  32 -> 64px */
  --fs-h1:      clamp(1.75rem, 1.14rem + 2.57vw, 3.19rem);   /*  28 -> 51px */
  --fs-h2:      clamp(1.50rem, 1.08rem + 1.77vw, 2.50rem);   /*  24 -> 40px */
  --fs-h3:      clamp(1.25rem, 1.03rem + 0.92vw, 1.75rem);   /*  20 -> 28px */
  --fs-h4:      clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /*  18 -> 22px */
  --fs-body:    clamp(1.00rem, 0.96rem + 0.18vw, 1.125rem);  /*  16 -> 18px */
  --fs-small:   clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);/*  14 -> 15px */
  --fs-eyebrow: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); /*  12 -> 13px */
  --fs-stat:    clamp(1.75rem, 1.14rem + 2.57vw, 3.19rem);

  /* Line heights — UNITLESS.
     Your current build has 1,163 px line-heights. Those do not scale with
     the font, which is why text collides at some widths. Never px here. */
  --lh-tight:   1.10;
  --lh-heading: 1.22;
  --lh-body:    1.65;
  --lh-ui:      1.30;

  --ls-display: -0.01em;
  --ls-heading:  0.01em;
  --ls-eyebrow:  0.08em;

  /* Fonts — read from your existing Elementor templates.
     Display in the design is a high-contrast serif (the "CIWA" wordmark);
     body is a humanist sans. */
  --ff-display: "Aboreto", "Playfair Display", Georgia, serif;
  --ff-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fw-body:     400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------------------
     3. SPACE SCALE — fluid
     --------------------------------------------------------------------- */
  --sp-3xs: clamp(0.25rem, 0.24rem + 0.04vw, 0.3125rem);
  --sp-2xs: clamp(0.50rem, 0.47rem + 0.13vw, 0.625rem);
  --sp-xs:  clamp(0.75rem, 0.70rem + 0.22vw, 1.00rem);
  --sp-sm:  clamp(1.00rem, 0.90rem + 0.44vw, 1.50rem);
  --sp-md:  clamp(1.50rem, 1.30rem + 0.88vw, 2.50rem);
  --sp-lg:  clamp(2.00rem, 1.60rem + 1.75vw, 4.00rem);
  --sp-xl:  clamp(3.00rem, 2.39rem + 2.63vw, 6.00rem);
  --sp-2xl: clamp(4.00rem, 3.08rem + 3.95vw, 8.50rem);

  --section-py: var(--sp-xl);
  --section-px: clamp(1.25rem, 0.82rem + 1.84vw, 3.25rem);
  --gap-grid:   clamp(1.00rem, 0.61rem + 1.67vw, 2.50rem);

  /* ---------------------------------------------------------------------
     4. LAYOUT
     Your current build uses 14 different content widths (1233 -> 1640px).
     That inconsistency is the main reason sections do not line up.
     ONE value. Every section. No laptop override.
     --------------------------------------------------------------------- */
  --w-content: 1440px;
  --w-narrow:  68ch;
  --w-form:    620px;

  /* ---------------------------------------------------------------------
     5. SURFACE
     --------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 42% 58% / 55% 45% 55% 45%;

  --shadow-card: 0 1px 2px rgba(43, 21, 36, 0.05),
                 0 8px 24px rgba(43, 21, 36, 0.07);
  --shadow-lift: 0 4px 10px rgba(43, 21, 36, 0.08),
                 0 18px 44px rgba(43, 21, 36, 0.10);

  --ring-focus:  3px solid var(--c-focus);
  --ring-offset: 2px;

  /* ---------------------------------------------------------------------
     6. MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
}