/* Rally — shared design tokens & base */
:root {
  /* Brand */
  --court-900: #08291F;
  --court-800: #0B3B2E;
  --court-700: #0D5C46;
  --court-600: #117256;
  --court-100: #DCEEE5;
  --court-50:  #EEF6F1;
  --ball:      #D9F24A;
  --ball-600:  #C2DB2E;
  --ball-50:   #F6FBD9;

  /* Neutrals (warm) */
  --ink:      #12201B;
  --ink-2:    #34443D;
  --muted:    #5B6A63;
  --line:     #E3E1D7;
  --line-2:   #EEECE4;
  --bg:       #F6F5EF;
  --surface:  #FFFFFF;
  --surface-2:#FAF9F5;

  /* Semantic */
  --danger:     #B4232A;
  --danger-bg:  #FDECEC;
  --danger-line:#F4C3C5;
  --warn:       #94560A;
  --warn-bg:    #FFF3DB;
  --warn-line:  #F3D9A4;
  --success:    #12703F;
  --success-bg: #E3F4EA;
  --info:       #1F4FC4;
  --info-bg:    #E8EEFC;

  /* Program types (schedule) */
  --t-booking: #0D5C46;  --t-booking-bg: #DCEEE5;
  --t-open:    #5F6B00;  --t-open-bg:    #EEF6B8;
  --t-league:  #1F4FC4;  --t-league-bg:  #E2E9FB;
  --t-clinic:  #6A3BB8;  --t-clinic-bg:  #EEE7FA;
  --t-ladder:  #A84A0B;  --t-ladder-bg:  #FCE9D9;
  --t-maint:   #55605B;  --t-maint-bg:   #ECEDEA;

  /* Type */
  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing (4pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* Radius & elevation */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --e1: 0 1px 2px rgba(18, 32, 27, .06), 0 1px 1px rgba(18, 32, 27, .04);
  --e2: 0 4px 12px -2px rgba(18, 32, 27, .08), 0 2px 4px rgba(18, 32, 27, .04);
  --e3: 0 24px 48px -12px rgba(8, 41, 31, .25), 0 8px 16px -8px rgba(8, 41, 31, .12);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --d-fast: 120ms; --d-med: 200ms; --d-slow: 320ms;

  /* Z scale */
  --z-sticky: 20; --z-drawer: 40; --z-modal: 100; --z-toast: 1000;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }

.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; flex: none; }
.icon-lg { width: 24px; height: 24px; flex: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--s4); }

:focus-visible { outline: 3px solid var(--court-600); outline-offset: 2px; border-radius: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--court-700); color: #fff; }
.btn-primary:hover { background: var(--court-800); }
.btn-ball { background: var(--ball); color: var(--court-900); }
.btn-ball:hover { background: var(--ball-600); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: #C9C6B8; background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(18, 32, 27, .06); color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #941C22; }
.btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 var(--s6); font-size: 16px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.brand svg { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}