/* ==========================================================================
   Wenya — Design System Tokens
   Single source of truth for color, type, spacing, radius, shadow & motion.
   Extracted from the original Framer site and organised into a clean scale.
   ========================================================================== */

:root {
  /* ---- Brand palette ----------------------------------------------------
     Brand Guidelines V2 2026: Wenya Blue #3414B5, Wenya Zest #DFF0A8,
     White #FFFFFF, Grey #E7E7E7 — "used with discipline, no exceptions".
     Interactive accents are Wenya Blue; no off-brand violets. */
  --color-indigo:        #3414b5; /* Wenya Blue — primary brand          */
  --color-indigo-700:    #2a0f94;
  --color-indigo-300:    #7a74d6; /* indigo gradient highlight           */
  --color-violet:        #3414b5; /* accent / interactive = Wenya Blue   */
  --color-violet-300:    #7a74d6; /* light end for legacy gradients      */
  --color-lavender-bg:   #e7e0ff; /* tinted surface                      */

  --color-lime:          #dff0a8; /* Wenya Zest — CTA fill               */
  --color-lime-deep:     #819932; /* legacy gradient bottom — avoid      */
  --color-lime-soft:     #f9ffe8;
  --color-mint:          #d0fecf; /* outgoing chat bubble                */

  --color-imsg-blue:     #0a84ff; /* iMessage blue bubble                */
  --color-imsg-grey:     #e9e9eb; /* incoming chat bubble                */

  /* ---- Neutrals --------------------------------------------------------- */
  --color-ink:           #101011; /* near-black text / dark surface      */
  --color-ink-900:       #0a0a0a;
  --color-ink-700:       #2b2b2c;
  --color-grey-500:      #606266;
  --color-grey-400:      #767779;
  --color-grey-300:      #a7a7a7;
  --color-surface:       #f0f2f6; /* light section background            */
  --color-surface-2:     #ffffff;
  --color-white:         #ffffff;
  --color-black:         #000000;

  /* ---- Semantic --------------------------------------------------------- */
  --bg-page:             var(--color-indigo);
  --bg-light:            var(--color-surface);
  --bg-dark:             var(--color-ink);

  --text-on-dark:        var(--color-white);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.66);
  --text-on-light:       var(--color-ink);
  --text-on-light-muted: var(--color-grey-500);

  /* CTA is flat Wenya Zest per the brand palette (no olive gradient). */
  --cta-fill:            var(--color-lime);
  --cta-text:            var(--color-ink);
  --violet-pill:         linear-gradient(180deg, var(--color-violet) 0%, var(--color-violet-300) 100%);
  /* Spotlight: a tight, brand-pure lift of Wenya Blue (white over indigo —
     no violet hue shift), fading out well inside the section so the glow
     can't wash the surrounding copy. */
  --hero-glow:           radial-gradient(44% 34% at 50% 32%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 45%, rgba(52,20,181,0) 68%);

  /* ---- Typography ------------------------------------------------------- */
  /* The original site uses Figtree for everything (display + body),
     with Fragment Mono kept only for small monospace labels. */
  --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (matched to source presets) */
  --fs-display:  clamp(2.5rem, 1.4rem + 4.3vw, 4.375rem); /* 40 → 70  (hero h1) */
  --fs-h2:       clamp(1.75rem, 1.05rem + 2.6vw, 3rem);   /* 28 → 48  (section h2) */
  --fs-h3:       clamp(1.4rem, 1.15rem + 1.1vw, 1.875rem);/* 22 → 30 */
  --fs-h5:       1.75rem;   /* 28  (problem titles) */
  --fs-lead:     clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); /* 17 → 21 */
  --fs-body:     1.125rem;  /* 18 */
  --fs-sm:       0.9375rem; /* 15 */
  --fs-eyebrow:  0.8125rem; /* 13 */

  --lh-tight:    1.1;
  --lh-snug:     1.1;
  --lh-body:     1.45;

  --ls-tight:    -0.02em;
  --ls-eyebrow:  0.08em;

  --weight-body:    500;
  --weight-heading: 800;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --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;

  --section-pad-y: clamp(72px, 9vw, 144px);
  --container:     1160px;
  --container-narrow: 760px;
  --gutter:        clamp(20px, 5vw, 48px);

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   30px;
  --radius-xl:   44px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm:   0 2px 8px rgba(16, 16, 17, 0.08);
  --shadow-md:   0 12px 32px rgba(16, 16, 17, 0.12);
  --shadow-lg:   0 30px 80px rgba(16, 16, 17, 0.22);
  --shadow-cta:  0 10px 28px rgba(223, 240, 168, 0.35);
  --shadow-card: 0 24px 60px rgba(20, 10, 70, 0.28);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         0.6s;
}