/* ============================================================================
   THEME — the one file you edit to reskin this site.

   Colours, type scale, spacing, radii and shadows. Nothing else in the CSS
   defines a colour, a font size or a shadow; everything reads these tokens.
   Swapping this file for another product's is the whole of a reskin.

   ---------------------------------------------------------------------------
   HARD RULE: BREAKPOINTS DO NOT LIVE HERE, AND THEY DO NOT CHANGE PER SITE.

   Every site built on this base uses the same three:

       1024px   desktop -> tablet     multi-column grids drop to two
        768px   tablet  -> phone      everything goes single column
        480px   small phone           type and padding step down again

   They are written literally in base.css and page-*.css, because CSS custom
   properties cannot be used in a media query condition. That is a limitation,
   but it is also the point: one shared, tested scale across five sites is
   verifiable, five diverging ones are not. Brand density is expressed through
   the spacing scale below, not by moving breakpoints.

   Design floor is 320px. build/validate.js fails the build on any horizontal
   overflow at 320px, so a token change that breaks narrow screens cannot ship.
   ========================================================================= */

:root {

  /* --- brand ------------------------------------------------------------ */
  --brand: #5B2FE0;
  --brand-light: #7C4DEF;
  --brand-bright: #9B7BF2;
  --brand-grad: linear-gradient(135deg, #7C4DEF, #5B2FE0);

  --accent: #FF4D6D;
  --accent-grad: linear-gradient(135deg, #FF6B57, #FF3D6E);

  --teal: #12B5A5;
  --amber: #F59E0B;
  --green: #16A34A;

  /* --- surfaces --------------------------------------------------------- */
  --page-bg: linear-gradient(180deg, #ffffff 0%, #f6f2fe 45%, #ffffff 100%);
  --surface: #ffffff;
  --surface-tint: #faf8ff;      /* list rows inside a panel */
  --surface-tint-2: #f6f2fe;    /* trigger cards, feature bar top */
  --surface-tint-3: #efe9fd;    /* action cards, feature bar bottom */
  --panel-grad: linear-gradient(180deg, #faf7ff, #fff);
  --panel-grad-2: linear-gradient(180deg, #fbfaff, #fff);
  --bar-grad: linear-gradient(180deg, #f6f2fe, #efe9fd);
  --footer-bg: #141833;

  /* --- ink -------------------------------------------------------------- */
  --ink: #171B36;               /* headings */
  --body: #5B5F73;              /* body copy */
  --muted: #7a869a;             /* supporting lines inside cards */
  --faint: #8b83a3;             /* breadcrumbs, disabled labels */
  --on-brand: #ffffff;

  /* --- lines ------------------------------------------------------------ */
  --line: #ece7f7;
  --line-soft: #ede7fc;
  --line-strong: #e3d9fb;
  --line-dashed: #ddd5f0;
  --dot: #c4b3f5;               /* the bullet in a module row */

  /* --- type -------------------------------------------------------------
     Fluid between the small-phone and desktop ends of the scale. Edit the
     clamp bounds here; never add a font-size to a media query. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

  --fs-h1: clamp(25px, 3.4vw + 12px, 42px);
  --fs-h2: clamp(20px, 1.1vw + 16px, 26px);
  --fs-h3: clamp(14.5px, .3vw + 13.5px, 15px);
  --fs-lead: clamp(15px, .5vw + 13.5px, 17px);
  --fs-md: 15px;
  --fs-base: 13.5px;
  --fs-sm: 12.5px;
  --fs-xs: 12px;

  --lh-tight: 1.1;
  --lh-heading: 1.35;
  --lh-body: 1.65;

  /* --- spacing -----------------------------------------------------------
     Brand density lives here. A denser product shrinks these; it does not
     move a breakpoint. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;

  --container: 1180px;
  --measure: 820px;             /* the widest a column of prose should get */

  /* --- radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- shadows ---------------------------------------------------------- */
  --sh-card: 0 12px 30px rgba(22, 38, 74, .07);
  --sh-panel: 0 20px 50px rgba(22, 38, 74, .08);
  --sh-soft: 0 8px 22px rgba(22, 38, 74, .05);
  --sh-lift: 0 16px 34px rgba(22, 38, 74, .10);
  --sh-cta: 0 14px 30px rgba(255, 61, 110, .35);
  --sh-cta-hover: 0 16px 32px rgba(255, 61, 110, .42);
  --sh-brand: 0 14px 30px rgba(91, 47, 224, .32);
  --sh-brand-hover: 0 16px 34px rgba(91, 47, 224, .4);
  --sh-tile: 0 10px 22px rgba(91, 47, 224, .4);
  --sh-badge: 0 6px 14px rgba(255, 61, 110, .45);
  --sh-swap: 0 12px 26px rgba(255, 61, 110, .4);

  /* --- interaction -------------------------------------------------------
     44px is the accessible minimum for a touch target and validate.js
     enforces it, so this is a floor, not a preference. */
  --tap-min: 44px;
  --ease: .18s ease;
}