/* ==========================================================================
   Spundle — Design Tokens
   Single source of truth for colour, type, spacing, layout and motion.
   Breakpoints (CSS variables can't be used inside @media, keep in sync):
     --bp-xl  ≥ 1440px   wide desktop (container grows to 1140px)
     --bp-lg  ≤  991px   tablet
     --bp-md  ≤  767px   large phone
     --bp-sm  ≤  479px   phone
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --color-plum: #563b56;          /* primary: buttons, footer, focus ring */
  --color-plum-dark: #3f2a3f;     /* pressed state */
  --color-lilac: #d2bddb;         /* hero + founder panels, timeline line */
  --color-mist: #eaedf9;          /* soft panels, icon circles */
  --color-cream: #fbf3eb;         /* highlight mark on lilac */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Semantic colour -------------------------------------------------- */
  --color-text: #000000;
  --color-text-strong: #303030;
  --color-text-muted: #606060;    /* 6.3:1 on white */
  --color-text-inverse: var(--color-white);
  --color-placeholder: #6b6c70;   /* 5.3:1 on white (was #808184 = 3.9:1) */
  --color-border: #d3d4d5;
  --color-border-strong: #8a8b8e; /* form field border, 3.4:1 on white */
  --color-surface: var(--color-white);
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-subtle: rgb(0 0 0 / 0.1);
  --color-success: #2f6b3a;
  --color-error: #a3262a;
  --color-focus: var(--color-plum);

  /* ---- Typography: families -------------------------------------------- */
  --font-display: "Vultura", "Vollkorn", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Vollkorn", Georgia, serif;
  --font-meta: "Montserrat", var(--font-body);

  /* ---- Typography: weights --------------------------------------------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Typography: scale (desktop; overridden per breakpoint below) ----- */
  --fs-watermark: 222px;
  --fs-display: 45px;   /* section titles            (h2.title--xl) */
  --fs-h1: 42px;        /* hero                       (h1)           */
  --fs-h2: 40px;        /* founder title              (h2.title--lg) */
  --fs-h2-modal: 35px;  /* modal headline (Vollkorn)                  */
  --fs-h3-lg: 30px;     /* timeline year                             */
  --fs-h3: 25px;        /* feature card title                        */
  --fs-h4: 21px;        /* form card title                           */
  --fs-lead: 16px;      /* intro paragraphs                          */
  --fs-body: 16px;
  --fs-small: 14px;     /* card copy, buttons, inputs                */
  --fs-caption: 13px;   /* helper text (was 11px)                    */
  --fs-micro: 12px;     /* labels, legal (was 9px)                   */

  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-base: 1.5;
  --lh-relaxed: 1.8;

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 50px;
  --space-8: 60px;
  --space-9: 90px;
  --space-10: 120px;
  --space-11: 180px;
  --space-12: 240px;
  --space-13: 300px;

  /* Section rhythm */
  --section-overlap: 180px;  /* founder panel hangs into the next section */

  /* ---- Layout ----------------------------------------------------------- */
  --container: 980px;
  --container-narrow: 940px;
  --container-form: 680px;
  --gutter: 20px;
  --header-pad: 30px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-pill: 20px;
  --radius-round: 50%;
  --border-width: 1px;
  --line-weight: 6px;        /* timeline line + dot ring */

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-float: 0 0 5px rgb(0 0 0 / 0.3);
  --shadow-modal: 0 20px 60px rgb(0 0 0 / 0.25);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: ease-in-out;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-reveal: 0.8s;
  --reveal-distance: 40px;

  /* ---- Layers ----------------------------------------------------------- */
  --z-raised: 3;
  --z-header: 50;
  --z-modal: 1000;

  /* ---- Component sizes -------------------------------------------------- */
  --icon-circle: 65px;
  --close-size: 36px;
  --play-size: 68px;
  --carousel-btn: 44px;
  --input-height: 48px;
}

@media (min-width: 1440px) {
  :root {
    --container: 1140px;
  }
}

@media (max-width: 991px) {
  :root {
    --gutter: 40px;
    --fs-watermark: 180px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 38px;
    --fs-h1: 36px;
    --fs-h2: 34px;
    --fs-watermark: 120px;
  }
}

@media (max-width: 479px) {
  :root {
    --gutter: 20px;
    --fs-display: 32px;
    --fs-h1: 32px;
    --fs-h2: 30px;
    --fs-h2-modal: 30px;
    --fs-h3: 22px;
    --fs-h3-lg: 26px;
    --fs-body: 15px;
    --fs-lead: 15px;
    --play-size: 52px;
  }
}