/* ============================================================
   THE SIDE OUT — Design Tokens
   Source of truth: docs/website-agency/DESIGN-DIRECTION.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Surfaces ─────────────────────────────────────── */
  --navy-900: #06122A;
  --navy-800: #0A1C3D;
  --navy-700: #102A52;
  --navy-600: #18386B;

  /* ── Court blue ───────────────────────────────────── */
  --court-600: #155CC2;
  --court-500: #1E74E6;
  --court-400: #3A8DFF;

  /* ── Gold — primary CTA ───────────────────────────── */
  --gold-600: #E09A00;
  --gold-500: #F4B41A;
  --gold-400: #FFC83D;

  /* ── Lime — LIVE signal ONLY ──────────────────────── */
  --lime-500: #B8E218;
  --lime-400: #CDEE45;

  /* ── Neutrals ─────────────────────────────────────── */
  --chalk:        #F5F8FD;
  --concrete-200: #C9D2DD;
  --concrete-400: #8B95A3;
  --concrete-600: #4A5566;

  /* ── Light surfaces (booking/admin) ──────────────── */
  --paper-50:  #FFFFFF;
  --paper-100: #F1F5FA;
  --ink-900:   #0A1626;

  /* ── Status semantics (always icon+label+color) ───── */
  --ok:    #2FB67C;
  --warn:  #F4B41A;
  --error: #E5484D;
  --live:  var(--lime-500);

  /* ── Typography ───────────────────────────────────── */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Type scale ───────────────────────────────────── */
  --t-hero:    clamp(2.75rem, 7vw, 6rem);
  --t-display: clamp(2rem, 4.5vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --t-h3:      1.25rem;
  --t-score:   clamp(2.5rem, 6vw, 4.5rem);
  --t-eyebrow: 0.8125rem;
  --t-body-lg: 1.125rem;
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* ── Spacing (8px base) ───────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --section-py: clamp(64px, 10vw, 128px);

  /* ── Grid ─────────────────────────────────────────── */
  --gutter: clamp(16px, 3vw, 32px);
  --maxw:   1200px;

  /* ── Radius ───────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* ── Transitions ──────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);

  /* ── Focus ring ───────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--court-400);
}