/* Design tokens — Saintex
   Single source of truth for colors, type, spacing, radii.
   Elementor mapping: copy these variables into Site Settings › Global Colors / Global Fonts.
*/

:root {
  /* Ink + neutrals */
  --c-ink:        #0A0A12;
  --c-ink-soft:   #2A2A3A;
  --c-muted:      #6C6C80;
  --c-line:       #E3E3EA;
  --c-bg:         #FFFFFF;
  --c-bg-soft:    #EFF1EF;
  --c-bg-warm:    #F9E6E3;

  /* Brand colors — from 2025 Saintex brand book */
  --c-blue-electric: #291EFF;
  --c-blue-mid:      #026EFC;
  --c-blue-soft:     #8F9BF4;
  --c-peach:         #FFCC98;
  --c-coral:         #FF8D72;

  /* Semantic */
  --c-primary:       var(--c-blue-electric);
  --c-accent:        var(--c-coral);
  --c-on-primary:    #FFFFFF;

  /* Gradients (the "light reflections" per brand book) */
  --g-aurora: linear-gradient(135deg, #E6E9FB 0%, #F5E7E3 50%, #FFE0CC 100%);
  --g-aurora-deep: linear-gradient(135deg, #8F9BF4 0%, #F9E6E3 55%, #FFCC98 100%);
  --g-prism: conic-gradient(from 210deg,
    #FFCC98 0%, #F9E6E3 16%, #8F9BF4 33%,
    #026EFC 50%, #291EFF 66%, #8F9BF4 83%, #FFCC98 100%);
  --g-spotlight: radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
    rgba(255,141,114,.28), rgba(143,155,244,.10) 45%, transparent 72%);

  /* Typography
     Display: Bubblebody Neue in production (Elementor build).
     Draft falls back to Bricolage Grotesque, a free variable proxy.
     Body: DM Sans (exact brand spec). */
  --ff-display: "Bricolage Grotesque", "Bubblebody Neue", system-ui, sans-serif;
  --ff-body:    "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-overline: .78rem;
  --fs-body:     1rem;
  --fs-lead:     1.125rem;
  --fs-h4:       1.25rem;
  --fs-h3:       clamp(1.5rem,  1.2rem + 1.2vw, 2rem);
  --fs-h2:       clamp(2.4rem,  1.8rem + 2.6vw, 3.6rem);
  --fs-h1:       clamp(2.75rem, 2rem   + 4.2vw, 5.5rem);
  --fs-display:  clamp(3.25rem, 2rem   + 6vw,   7rem);

  /* Spacing — 8px system */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px;
  --r-pill: 999px;

  /* Shadows — soft, ambient (no heavy drop shadows) */
  --sh-1: 0 1px 2px rgba(10,10,18,.04), 0 6px 18px rgba(10,10,18,.06);
  --sh-2: 0 2px 4px rgba(10,10,18,.05), 0 18px 44px rgba(10,10,18,.09);
  --sh-glow: 0 0 0 1px rgba(41,30,255,.08), 0 12px 40px rgba(41,30,255,.15);

  /* Motion */
  --t-fast: 160ms;
  --t-med:  320ms;
  --t-slow: 620ms;
  --ease:   cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --max-w:     1280px;
  --max-w-rd:  980px;   /* reading column */
  --gutter:    clamp(20px, 4vw, 48px);
  --header-h:  76px;
}