/* ═══════════════════════════════════════════════════════════
 * Tennis Hub — Design System Tokens
 * Source of truth for all CSS custom properties.
 * Imported by main.css, blog.css, court-page.css, etc.
 * ═══════════════════════════════════════════════════════════ */
:root{
  /* Backgrounds */
  --bg-dark:#000000;
  --bg-light:#ffffff;
  --bg-white:#ffffff;
  --bg-black:#000000;

  /* Accent (single brand color) */
  --accent:#c8e64a;
  --accent-hover:#c8e64a;
  --accent-active:#c8e64a;
  --link-light:#c8e64a;
  --link-dark:#c8e64a;

  /* Accent alpha (change these to rebrand) */
  --accent-3:rgba(200,230,74,0.03);
  --accent-4:rgba(200,230,74,0.04);
  --accent-6:rgba(200,230,74,0.06);
  --accent-8:rgba(200,230,74,0.08);
  --accent-10:rgba(200,230,74,0.10);
  --accent-12:rgba(200,230,74,0.12);
  --accent-14:rgba(200,230,74,0.14);
  --accent-18:rgba(200,230,74,0.18);
  --accent-20:rgba(200,230,74,0.20);
  --accent-22:rgba(200,230,74,0.22);
  --accent-25:rgba(200,230,74,0.25);
  --accent-30:rgba(200,230,74,0.30);
  --accent-35:rgba(200,230,74,0.35);

  /* Neutral states for informational tags and secondary controls. */
  --accent-on-light:#1d1d1f;
  --neutral-4:rgba(255,255,255,0.04);
  --neutral-8:rgba(255,255,255,0.08);
  --neutral-10:rgba(255,255,255,0.10);
  --neutral-12:rgba(255,255,255,0.12);
  --neutral-18:rgba(255,255,255,0.18);
  --neutral-20:rgba(255,255,255,0.20);

  /* Text */
  --text-primary-light:#1d1d1f;
  --text-primary-dark:#ffffff;
  --text-secondary-light:rgba(0,0,0,0.72);
  --text-secondary-dark:rgba(255,255,255,0.72);
  --text-tertiary:rgba(0,0,0,0.48);
  --text-tertiary-dark:rgba(255,255,255,0.48);

  /* Surfaces */
  --surface-dark-1:#1a1a1c;
  --surface-dark-2:#242426;
  --surface-dark-3:#2a2a2d;
  --surface-light-1:#ffffff;
  --surface-light-2:#fafafc;

  /* Dividers */
  --divider-dark:rgba(255,255,255,0.06);
  --divider-light:rgba(0,0,0,0.08);

  /* Shadows */
  --shadow-card:0 4px 24px rgba(0,0,0,0.12);
  --shadow-card-hover:0 8px 40px rgba(0,0,0,0.18);
  --shadow-elevated:0 12px 48px rgba(0,0,0,0.24);
  --shadow-accent-glow:0 0 24px rgba(200,230,74,0.25);
  --shadow-phone:0 30px 80px rgba(0,0,0,0.22), 0 12px 24px rgba(0,0,0,0.10);

  /* Gradients */
  --gradient-hero:linear-gradient(180deg,#000000 0%,#000000 100%);
  --gradient-accent:linear-gradient(135deg,rgba(200,230,74,0.08) 0%,transparent 50%);

  /* Spacing (8px base) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:80px;
  --space-10:120px;

  /* Border Radius */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:24px;
  --radius-pill:980px;
  --radius-circle:50%;

  /* Utility */
  --vh:100vh;

  /* Container widths (not tokens — documented for reference):
     1080px — standard container (sections, grids)
      960px — wide tables (dtr-compare)
      920px — list sections (dtr-examples, levels)
      760px — narrow containers (FAQ, hero inners, section heads)
      720px — hero text block
      640px — CTA text block
      580-620px — hero descriptions */
}