/**
 * Shared visual system. Tune colour here. Do not hardcode hex in components.
 *
 * Player + Admin share one brand palette: near-black forest, forest surfaces,
 * warm off-white type, tennis-ball lime primary/active/focus.
 * Admin (`body.experience-admin`) differs by density/utility only — not colour.
 * Semantic error/warning stay semantic. Brand name is not settled; tokens stay
 * product-agnostic. Legacy `--teal*` aliases map to brand lime.
 */
:root {
  --font-sans: system-ui, -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --gutter: var(--space-5);
  --section-gap: var(--space-6);
  --related-gap: var(--space-2);
  --group-gap: var(--space-4);
  --pad-card: var(--space-4);

  --radius-major: 16px;
  --radius-card: 14px;
  --radius-control: 12px;
  --radius-score: 12px;
  --score-skew: -4deg;
  --radius-pill: 999px;

  --border-width: 1px;

  --type-screen: 1.875rem; /* 30px */
  --type-status: 1.5rem;   /* 24px */
  --type-section: 1.25rem; /* 20px */
  --type-important: 1.125rem; /* 18px */
  --type-body: 1.0625rem;  /* 17px */
  --type-secondary: 1rem;  /* 16px */
  --type-meta: 0.9375rem;  /* 15px */
  --type-nav: 0.9375rem;
  --type-score: 3rem;
  --type-court: 3.75rem;
  --type-floor: 0.875rem;  /* 14px — never go below */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.45;

  --touch-min: 48px;
  --touch-button: 56px;
  --touch-primary: 60px;
  --touch-score: 80px;
  --touch-nav: 60px;

  --motion: 200ms;
  --motion-fast: 150ms;
  --motion-handoff: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --tabbar-height: calc(var(--touch-nav) + env(safe-area-inset-bottom, 0px));
}

/* Dark is the primary brand experience: near-black forest, tennis-ball lime. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07140F;
  --surface: #0E1C16;
  --surface-raised: #15241C;
  --border: #2A3D32;
  --text: #F3F0E6;
  --text-secondary: #CAC6BB;
  --text-muted: #9BA496;
  --brand: #C6D94A;
  --brand-fill: #C6D94A;
  --brand-dim: #8FA332;
  --brand-subdued: var(--brand-dim);
  --on-brand: #07140F;
  --gold: #C8A15A;
  --positive: var(--brand);
  --inactive: var(--text-muted);
  --selected: color-mix(in srgb, var(--brand-fill) 16%, var(--surface));
  /* Semantic aliases for a later brand pass:
     page background → --bg
     elevated surface → --surface-raised
     subtle surface → --surface
     selected row → --selected
     brand lime / brand lime subdued → --brand-fill / --brand-subdued
     positive → --positive
     achievement gold → --gold
  */
  --error: #D66A6A;
  --warning: #D0A15B;
  --focus: var(--brand);
  --active-ring: var(--brand-fill);
  --scrim: rgba(5, 12, 9, 0.76);
  /* Legacy aliases — keep existing component rules working. */
  --teal: var(--brand-fill);
  --teal-hi: var(--brand);
  --on-teal: var(--on-brand);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F1EA;
  --surface: #FFFFFF;
  --surface-raised: #F7F7F3;
  --border: #CCD3CE;
  --text: #0E1A14;
  --text-secondary: #56605C;
  --text-muted: #4E5754;
  --brand: #4F6310;
  --brand-fill: #C6D94A;
  --brand-dim: #6A7E24;
  --brand-subdued: var(--brand-dim);
  --on-brand: #07140F;
  --gold: #7A5C24;
  --positive: var(--brand);
  --inactive: var(--text-muted);
  --selected: color-mix(in srgb, var(--brand-fill) 28%, var(--surface));
  --error: #B54A4A;
  --warning: #7A5418;
  --focus: var(--brand);
  --active-ring: var(--brand);
  --scrim: rgba(14, 26, 20, 0.45);
  --teal: var(--brand-fill);
  --teal-hi: var(--brand);
  --on-teal: var(--on-brand);
}

/*
 * Admin density only — inherits Player forest/lime colour tokens.
 * Wider desktop layout and compact controls live in admin.css.
 */
body.experience-admin {
  --section-gap: var(--space-4);
  --pad-card: var(--space-3);
}