/* ═══════════════════════════════════════════════════════════════════════════
   SPELHOUSE CHICAGO — DESIGN TOKENS
   Morehouse maroon blended with Spelman light blue. Official college marks
   are used with the chapters' permission. See docs/BRAND.md for provenance.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ─── Spelman ─── */
  --spelman-blue:      #9bcbeb;   /* PMS 283 C — "Spelman blue", the light blue */
  --spelman-sky:       #c7e3f5;   /* tint */
  --spelman-mist:      #e8f3fb;   /* wash for badges / info */
  --spelman-ink:       #1d419e;   /* the logo blue; readable on light surfaces */
  --spelman-navy:      #00325d;   /* deep blue from spelman.edu (rarely used) */

  /* ─── Morehouse (Brand Guidelines, March 2021) ─── */
  --morehouse-maroon:  #840028;   /* PMS 202 C — primary */
  --morehouse-crimson: #9e1b37;   /* PMS 201 C — lighter maroon */
  --morehouse-deep:    #5a0019;
  --morehouse-gold:    #c1a231;   /* PMS 7753 U — accent, ≤20% usage */
  --morehouse-tan:     #c5c19d;
  --morehouse-gray:    #a7a8a9;   /* PMS Cool Gray 6 C */
  --morehouse-blush:   #f6e3e8;

  /* ─── Semantic aliases ─── */
  --color-primary:       var(--morehouse-maroon);
  --color-primary-hover: var(--morehouse-crimson);
  --color-secondary:     var(--spelman-blue);
  --color-secondary-hover: var(--spelman-sky);
  --color-maroon:        var(--morehouse-maroon);
  --color-maroon-hover:  var(--morehouse-crimson);
  --color-blue:          var(--spelman-ink);
  --color-blue-hover:    #2a55b8;
  --color-blue-soft:     var(--spelman-blue);
  --color-gold:          var(--morehouse-gold);
  --color-gold-hover:    #d4b64a;

  /* ─── Neutrals ─── */
  --ink:        #1a1114;
  --ink-2:      #3f343a;
  --ink-3:      #665a60;   /* ≥4.5:1 on paper */
  --ink-4:      #928890;   /* decorative only */
  --paper:      #fbf8f6;   /* warm white */
  --paper-2:    #f4eeee;
  --paper-3:    #eae2e3;
  --line:       #e4dbdd;
  --line-strong:#d0c3c7;
  --white:      #ffffff;

  --surface-base:     var(--paper);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--paper-2);
  --surface-dark:     #2b0a16;   /* maroon-black for hero/footer */
  --surface-dark-2:   #3b1021;

  --text:         var(--ink);
  --text-2:       var(--ink-2);
  --text-3:       var(--ink-3);
  --text-on-dark:   #f7f1f2;
  --text-on-dark-2: #dcc9cf;
  --text-link:    var(--spelman-ink);
  --text-link-hover: #122e78;

  --color-success: #2e7d4f;
  --color-success-soft: #e2f3e8;
  --color-error:   #b3261e;
  --color-error-soft: #fbe6e4;
  --color-warning: #8a6d00;
  --color-warning-soft: #fff4cc;
  --color-info-soft: var(--spelman-mist);

  /* ─── Typography ─── */
  --font-display: 'Bebas Neue', 'Alternate Gothic', 'Impact', sans-serif;
  --font-serif:   'Libre Caslon Text', 'Adobe Caslon Pro', Georgia, serif;
  --font-sans:    'DM Sans', 'DIN Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;  /* 17px — comfortable for an alumni audience */
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.625rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;
  --text-display: clamp(3rem, 7vw + 1rem, 6.5rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-normal:1.55;
  --leading-relaxed:1.7;
  --tracking-wide: 0.08em;
  --tracking-wider:0.14em;

  /* ─── Spacing (4pt) ─── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --space-section: clamp(3.5rem, 8vw, 6.5rem);

  /* ─── Layout ─── */
  --container: 1180px;
  --container-narrow: 820px;
  --container-wide: 1380px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --nav-height: 72px;
  --touch: 44px;

  /* ─── Shape & depth ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 10, 22, 0.06), 0 1px 3px rgba(43, 10, 22, 0.05);
  --shadow-md: 0 4px 12px rgba(43, 10, 22, 0.08), 0 2px 4px rgba(43, 10, 22, 0.05);
  --shadow-lg: 0 16px 40px rgba(43, 10, 22, 0.16), 0 4px 10px rgba(43, 10, 22, 0.06);
  --shadow-glow-blue: 0 10px 30px rgba(155, 203, 235, 0.45);
  --shadow-glow-maroon: 0 10px 30px rgba(132, 0, 40, 0.28);

  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--spelman-ink);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
  --dur-slow: 320ms;

  /* The signature blend: Morehouse maroon flowing into Spelman light blue
     (same diagonal two-tone treatment as the Jokes for Hope site). */
  --gradient-spelhouse: linear-gradient(100deg, var(--morehouse-deep) 0%, var(--morehouse-maroon) 42%, var(--spelman-blue) 100%);
  --gradient-spelhouse-soft: linear-gradient(100deg, var(--morehouse-maroon) 0%, var(--spelman-blue) 100%);
  /* Hard 50/50 split for places that want the two houses side by side. */
  --gradient-split: linear-gradient(90deg, var(--morehouse-maroon) 50%, var(--spelman-blue) 50%);
  /* Dark wash for hero/photo overlays: maroon-black with a cool blue drift. */
  --gradient-dark-wash: linear-gradient(135deg, rgba(43, 10, 22, 0.92) 0%, rgba(90, 0, 25, 0.8) 55%, rgba(29, 65, 158, 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}