/* ============================================================
   Playasport Design System — token layer.
   Lifted verbatim from the brand bundle
   (StudioProjects/branding/Playasport Components.html).
   Fonts are loaded via Google Fonts <link> in lib.php, so the
   bundle's @font-face blocks (blob UUID srcs) are intentionally omitted.
   This file is the brand source of truth — keep in sync with the bundle.
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px base */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 4rem;      /* 64px */
  --text-6xl: 5.25rem;   /* 84px */

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Semantic roles */
  --role-display-font:   var(--font-display);
  --role-display-weight: var(--weight-bold);
  --role-heading-font:   var(--font-display);
  --role-heading-weight: var(--weight-semibold);
  --role-body-font:      var(--font-body);
  --role-eyebrow-font:   var(--font-body);
  --role-data-font:      var(--font-mono);

  /* --- Brand: Play green (lime) --- */
  --green-50:  #f4fadf;
  --green-100: #e8f4bd;
  --green-200: #dbee94;
  --green-300: #cfe86a;
  --green-400: #c5e246;   /* core wordmark green */
  --green-500: #abca2f;
  --green-600: #8aa823;
  --green-700: #69821d;
  --green-800: #4b5d18;
  --green-900: #2f3a13;

  /* --- Brand: Sport navy --- */
  --navy-50:  #e6eef4;
  --navy-100: #c2d6e5;
  --navy-200: #8fb1cd;
  --navy-300: #5689b3;
  --navy-400: #226895;
  --navy-500: #005a85;
  --navy-600: #004777;   /* core wordmark navy */
  --navy-700: #003a61;
  --navy-800: #002b48;
  --navy-900: #001b2e;

  /* --- Brand: Sky blue --- */
  --sky-50:  #e9f6fc;
  --sky-100: #c8e9f7;
  --sky-200: #97d4ee;
  --sky-300: #63bee6;
  --sky-400: #33a4dd;   /* core sky */
  --sky-500: #1e8ec7;
  --sky-600: #1571a2;
  --sky-700: #11567c;
  --sky-800: #0d3d58;
  --sky-900: #082636;

  /* --- Brand: Ball yellow (high-energy accent) --- */
  --yellow-300: #f8ff7a;
  --yellow-400: #f3ff00;   /* tennis-ball yellow */
  --yellow-500: #e2ec00;
  --yellow-600: #c2cc00;

  /* --- Neutrals (cool slate) --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f5f8fa;
  --neutral-100: #eaeff3;
  --neutral-200: #d9e1e8;
  --neutral-300: #bcc8d2;
  --neutral-400: #93a2af;
  --neutral-500: #6b7c8a;
  --neutral-600: #4e5e6b;
  --neutral-700: #374650;
  --neutral-800: #232e36;
  --neutral-900: #131a1f;

  /* --- Functional / status --- */
  --success-bg:   #e7f6ec;
  --success-fg:   #1e8a4c;
  --success-solid:#22a35b;
  --warning-bg:   #fdf3da;
  --warning-fg:   #9a6a08;
  --warning-solid:#e0a106;
  --danger-bg:    #fbe9e9;
  --danger-fg:    #c0322b;
  --danger-solid: #e0473d;
  --info-bg:      #e9f6fc;
  --info-fg:      #1571a2;
  --info-solid:   #33a4dd;

  /* ========================================================
     Semantic aliases — reference these in UI, not raw scales
     (light defaults; the app stylesheet overrides for dark)
     ======================================================== */

  /* Text */
  --text-strong:  var(--navy-800);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-subtle:  var(--neutral-400);
  --text-inverse: var(--neutral-0);
  --text-brand:   var(--navy-600);
  --text-link:    var(--sky-600);

  /* Surfaces */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-inverse:var(--navy-800);
  --surface-brand:  var(--navy-600);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--navy-600);

  /* Primary action = navy */
  --action-primary-bg:       var(--navy-600);
  --action-primary-bg-hover: var(--navy-700);
  --action-primary-bg-press: var(--navy-800);
  --action-primary-fg:       var(--neutral-0);

  /* Accent action = green (the "Play" CTA) */
  --action-accent-bg:        var(--green-400);
  --action-accent-bg-hover:  var(--green-500);
  --action-accent-bg-press:  var(--green-600);
  --action-accent-fg:        var(--navy-800);

  /* Focus ring */
  --focus-ring: var(--sky-400);

  /* ========================================================
     Sport accent system — default = Tennis
     ======================================================== */
  --sport-primary:   var(--green-400);
  --sport-secondary: var(--yellow-400);
  --sport-deep:      var(--navy-600);
  --sport-glow:      color-mix(in srgb, var(--green-400) 55%, transparent);
  --sport-soft:      var(--green-50);

  /* Spacing — 4px base grid */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1320px;
  --gutter:        clamp(1rem, 4vw, 3rem);

  /* Component sizing */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --tap-min:      44px;

  /* Corner radii — rounded, matching the friendly wordmark */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  30px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Border widths */
  --border-w:       1px;
  --border-w-thick: 2px;

  /* Shadows — cool navy-tinted, soft */
  --shadow-xs: 0 1px 2px rgba(0, 43, 72, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 43, 72, 0.08);
  --shadow-md: 0 6px 18px rgba(0, 43, 72, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 43, 72, 0.14);
  --shadow-xl: 0 28px 64px rgba(0, 43, 72, 0.18);
  --shadow-glow: 0 8px 28px var(--sport-glow);

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width)
                       color-mix(in srgb, var(--focus-ring) 45%, transparent);

  /* Motion — quick, lightly springy */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

[data-sport="tennis"] {
  --sport-primary:   var(--green-400);
  --sport-secondary: var(--yellow-400);
  --sport-deep:      var(--navy-600);
  --sport-glow:      color-mix(in srgb, var(--green-400) 55%, transparent);
  --sport-soft:      var(--green-50);
}

/* base resets & typographic defaults */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0 0 0.5em;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / kicker */
.ps-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tabular stat numbers */
.ps-stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}