/* ============================================================
   School Party — design tokens
   Palette, fluid type scale, spacing and radii. One source of
   truth; styles.css never hardcodes a hex or a raw px size.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Brand palette (from the logo) */
  --night:   #140A22;
  --night-2: #1D1030;   /* raised surface on the dark ground */
  --bone:    #FAF7F2;
  --amber:   #F0C000;
  --magenta: #F0308F;
  --cyan:    #2FD6DC;
  --coral:   #F0783C;
  --violet:  #A65CF0;

  /* Semantic roles. Text colors are verified >= 4.5:1 on --night.
     The magenta CTA carries DARK ink, not white: white-on-magenta
     is 3.8:1 and fails, dark-on-magenta is 5.04:1 and passes. */
  --ink:          var(--bone);
  --ink-dim:      #C6BAD2;
  --ink-dimmer:   #93889E;
  --accent-text:  var(--amber);   /* 11.2:1 on night */
  --link-hover:   var(--cyan);    /* 10.7:1 on night */
  --cta-ink:      #1A0E10;        /* on magenta / amber / cyan buttons */

  --hairline: rgba(250, 247, 242, 0.14);

  /* Fluid type — min at 360px, max around 1300px. No fixed px headings. */
  --step-eyebrow: 0.9375rem;                              /* 15px, steady */
  --step-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 -> 18 */
  --step-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --step-h3:      clamp(1.375rem, 1.2rem + 0.9vw, 1.5625rem);
  --step-h2:      clamp(1.9rem, 1.4rem + 2.5vw, 2.75rem);
  --step-h1:      clamp(2.5rem, 1.6rem + 4.6vw, 5.125rem);
  --step-crew:    clamp(6rem, 3rem + 16vw, 16.25rem);     /* the "33" */

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  clamp(3.5rem, 2rem + 7vw, 7.5rem);   /* section rhythm */

  /* Layout */
  --container: 81.25rem;   /* 1300px cap, but never a fixed width */
  --gutter:    clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);

  /* Radii & rings */
  --radius:      1rem;
  --radius-pill: 999px;
  --ring-width:  0.4375rem;   /* 7px color ring around circle photos */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:      220ms;
}