/* ==========================================================================
   tokens.css — Design tokens (single source of truth)
   --------------------------------------------------------------------------
   Every other stylesheet and every future page reads from these variables.
   Change a brand value here and it propagates everywhere. Do not hard-code
   colors elsewhere; reference these custom properties.

   PALETTE: taken straight from the Knightdale Gymnastics + Health & Happiness
   Day logos — royal blue + lime green. Blue carries primary actions and text;
   lime green is the accent (used darker, --green-deep, wherever it sits on
   white or needs contrast).
   Type: Fredoka (display / wordmark) + Poppins (body).
   ========================================================================== */

:root {
  /* ── Brand (from the logos) ── */
  --blue:        #2B39C9;   /* royal blue — primary */
  --blue-deep:   #1E2A9C;   /* hover / links */
  --blue-ink:    #15205C;   /* headings, dark UI, footer */
  --green:       #9BD83C;   /* lime green — accent / fills */
  --green-deep:  #5E8F1F;   /* lime used on white (text, icons) */

  /* ── Neutrals ── */
  --ink:         #1B2A3A;
  --ink-soft:    #4A5A6A;
  --cream:       #FBFCF4;   /* barely-warm off-white that suits lime */
  --sky:         #EDF1FF;   /* faint blue tint */
  --white:       #ffffff;
  --line:        rgba(21,32,92,0.12);

  /* ── Gradients ── */
  --grad-cool:   linear-gradient(135deg, var(--blue) 0%, var(--green-deep) 120%);
  --grad-warm:   linear-gradient(135deg, var(--green-deep) 0%, var(--blue) 120%);

  /* ── Elevation ── */
  --shadow-sm:   0 4px 14px rgba(21,32,92,0.08);
  --shadow-md:   0 12px 30px rgba(21,32,92,0.12);
  --shadow-lg:   0 24px 60px rgba(21,32,92,0.18);

  /* ── Geometry ── */
  --radius:      18px;
  --radius-lg:   28px;
  --radius-pill: 999px;
  --maxw:        1140px;
  --nav-h:       66px;

  /* ── Type ── */
  --font-display: 'Fredoka', 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* ── Focus ── */
  --focus-ring:  0 0 0 3px rgba(43,57,201,0.40);
}