/* ═══════════════════════════════════════════════════════════
   Playground Jiu Jitsu — Design Tokens
   Consolidated from The Audit diagnostic (C → target B+)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colors (8 core) ── */
  --white: #ffffff;
  --off-white: #f7f6f3;
  --light: #eeece8;
  --border: #e5e2dd;
  --text: #1c1c1c;
  --text-2: #6b6660;
  --text-3: #aaa8a4;
  --red: #c8202a;

  /* ── Derived (no new hex values) ── */
  --red-hover: color-mix(in srgb, var(--red) 80%, black);
  --red-soft: color-mix(in srgb, var(--red) 7%, transparent);
  --dark: var(--text);
  --dark-hover: color-mix(in srgb, var(--text) 80%, white);

  /* Program accent colors — semantic */
  --peewee: #4A90D9;
  --juniors: #2E7D32;
  --teens: #6A1B9A;

  /* Soft variants (derived) */
  --peewee-soft: color-mix(in srgb, var(--peewee) 8%, transparent);
  --juniors-soft: color-mix(in srgb, var(--juniors) 8%, transparent);
  --teens-soft: color-mix(in srgb, var(--teens) 8%, transparent);
  --adults: var(--text);
  --adults-soft: color-mix(in srgb, var(--text) 6%, transparent);

  /* Schedule aliases */
  --kids: var(--peewee);
  --kids-soft: var(--peewee-soft);
  --open: var(--red);
  --open-soft: var(--red-soft);

  /* White alpha scale */
  --white-90: color-mix(in srgb, white 90%, transparent);
  --white-70: color-mix(in srgb, white 70%, transparent);
  --white-60: color-mix(in srgb, white 60%, transparent);
  --white-50: color-mix(in srgb, white 50%, transparent);
  --white-45: color-mix(in srgb, white 45%, transparent);
  --white-40: color-mix(in srgb, white 40%, transparent);
  --white-35: color-mix(in srgb, white 35%, transparent);
  --white-30: color-mix(in srgb, white 30%, transparent);
  --white-25: color-mix(in srgb, white 25%, transparent);
  --white-20: color-mix(in srgb, white 20%, transparent);
  --white-10: color-mix(in srgb, white 10%, transparent);
  --white-06: color-mix(in srgb, white 6%, transparent);

  /* Dark alpha scale */
  --dark-85: color-mix(in srgb, var(--text) 85%, transparent);
  --dark-45: color-mix(in srgb, var(--text) 45%, transparent);
  --dark-20: color-mix(in srgb, var(--text) 20%, transparent);
  --dark-05: color-mix(in srgb, var(--text) 5%, transparent);

  /* Overlay */
  --overlay-light: color-mix(in srgb, black 8%, transparent);
  --overlay-medium: color-mix(in srgb, black 35%, transparent);
  --nav-bg: color-mix(in srgb, white 97%, transparent);

  /* ── Type Scale ── */
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;

  /* ── Spacing Scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Border Radius ── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Shadows ── */
  --shadow-sm: 0 8px 24px var(--overlay-light);
  --shadow-md: 0 16px 48px var(--overlay-light);
  --shadow-lg: 0 20px 60px var(--overlay-light);
}

@media (max-width: 960px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-actions,
  .hero-cta-group,
  .adults-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn-red,
  .btn-accent,
  .btn-white,
  .btn-dark,
  .btn-line,
  .nav-cta,
  .nav-drawer-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    text-align: center !important;
  }

  .footer-logo,
  .footer-tagline,
  .footer-ig-grid {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-links {
    columns: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 0.9rem !important;
    text-align: center !important;
  }
}