/* ============================================================
 * Morgan Hill Jiu Jitsu — Brand Tokens
 * v1.2 — April 2026
 *
 * Drop-in CSS custom properties. Import this file or paste
 * the :root block into any project to use the MHJJ palette,
 * typography, and structural tokens.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ─── Core palette ─────────────────────────────────────── */
  --mhjj-black:     #0A0A0A;   /* primary ink */
  --mhjj-white:     #FFFFFF;   /* primary surface */
  --mhjj-off:       #F7F7F5;   /* alt surface */

  /* ─── Brand accent — Carolina Blue (the mat) ─────────── */
  --mhjj-carolina:  #4B9CD3;   /* primary brand accent */
  --mhjj-deep:      #2A6E9E;   /* hover / pressed */
  --mhjj-mist:      #E6F1F9;   /* soft brand tint */
  --mhjj-seal-tint: #9BB7D9;   /* pastel variant inside the seal mark (reference only) */

  /* ─── Neutrals ─────────────────────────────────────────── */
  --mhjj-gray-900:  #1F1F1F;
  --mhjj-gray-600:  #6B6B6B;
  --mhjj-gray-300:  #D0D0D0;
  --mhjj-gray-100:  #EDEDED;

  /* ─── Typography ───────────────────────────────────────── */
  --font-sans:      'Outfit', system-ui, -apple-system, sans-serif;

  /* ─── Structure ────────────────────────────────────────── */
  --radius:         4px;
  --radius-lg:      8px;
  --radius-xl:      16px;
}