/* ==========================================================================
   CFS Fresno — design tokens
   Source of truth for colour, type, spacing and radius across cfsfresno.com.
   Pair with tokens.json (same values, machine-readable).
   Palette is taken from the CFS pennant logo and the "$70 Million Raised" badge.
   ========================================================================== */

:root {
  /* ---- Brand colour (from the CFS logo) ------------------------------- */
  --cfs-blue:        #29307F;   /* pennant blue — headings, nav, primary surfaces */
  --cfs-blue-deep:   #1C2260;   /* hover / footer / hero ground */
  --cfs-blue-tint:   #E9EBF6;   /* soft panels, code box welcome */
  --cfs-red:         #D71920;   /* pennant red — primary action, sale-day emphasis */
  --cfs-red-deep:    #B4141A;   /* hover */
  --cfs-red-tint:    #FBE9EA;   /* struck-through retail, alerts */
  --cfs-gold:        #C9961F;   /* badge gold — stars, "on our floor" badge */
  --cfs-gold-ink:    #7A5A0E;   /* gold as text (passes 4.5:1 on white) */
  --cfs-gold-tint:   #FBF3DD;

  /* ---- Neutrals -------------------------------------------------------- */
  --ground:          #FFFFFF;
  --surface:         #F4F5FA;   /* page sections */
  --surface-2:       #E9EBF2;   /* cards on surface, table stripes */
  --line:            #D5D8E4;
  --line-strong:     #AEB3C6;
  --ink:             #16193A;   /* body text */
  --ink-2:           #4A4F6A;   /* secondary text — 7.2:1 on white */
  --ink-3:           #62677F;   /* captions ≥ 14px only — 5.4:1 on white, 4.9:1 on surface */
  --ink-on-brand:    #FFFFFF;

  /* ---- Semantic -------------------------------------------------------- */
  --success:         #1D6F43;
  --success-tint:    #E4F3EA;
  --focus:           var(--cfs-blue);

  /* ---- School accent (set per event; see accent-notes.html) ----------- */
  --school:          var(--cfs-blue);                       /* default: no school */
  --school-ink:      #FFFFFF;                               /* text on --school */
  --school-tint:     color-mix(in srgb, var(--school) 10%, white);
  --school-deep:     color-mix(in srgb, var(--school) 80%, black);

  /* ---- Type ------------------------------------------------------------ */
  /* Oct 16 2026 (Danny, "option 1"): Bitter for display/headlines in normal case, Source Sans 3 for body.
     Bitter is a serif at text weight, so display tracking drops to 0 (the 0.02em was for Bebas caps). */
  --font-display:    "Bitter", Georgia, "Times New Roman", serif;
  --font-body:       "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --text-xs:   0.75rem;   /* 12 — legal only */
  --text-sm:   0.875rem;  /* 14 */
  --text-md:   1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  2rem;      /* 32 */
  --text-4xl:  2.5rem;    /* 40 */
  --text-5xl:  3.5rem;    /* 56 */
  --text-6xl:  4.5rem;    /* 72 */
  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.5;
  --tracking-display: 0;
  --tracking-caps:    0.08em;

  /* ---- Spacing (4-base) ----------------------------------------------- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --gutter:   1rem;     /* side padding at phone width */
  --measure:  65ch;
  --container: 1200px;

  /* ---- Radius / elevation --------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22, 25, 58, 0.08), 0 1px 1px rgba(22, 25, 58, 0.04);
  --shadow-2: 0 6px 20px rgba(22, 25, 58, 0.12);

  /* ---- Motion / misc --------------------------------------------------- */
  --tap: 44px;          /* minimum touch target */
  --ease: 160ms ease-out;
}