/* ============================================================
   PickleNow — Design Tokens & Base Components
   Pickleball open-play matching platform
   ============================================================ */

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* Brand greens */
  --green-50:  #ECFAF1;
  --green-100: #D4F3DF;
  --green-200: #A8E6BF;
  --green-300: #6FD498;
  --green-400: #3CBE74;
  --green-500: #18A558;   /* primary */
  --green-600: #14914C;
  --green-700: #107A40;
  --green-800: #0E3D2E;   /* deep — admin sidebar */
  --green-900: #0A2D22;

  /* Neutrals */
  --ink:       #16181C;
  --ink-2:     #3A3F46;
  --gray-700:  #4B5159;
  --gray-600:  #6B7280;
  --gray-500:  #8A9099;
  --gray-400:  #AEB4BC;
  --gray-300:  #D7DBE0;
  --gray-200:  #E6E9ED;
  --gray-100:  #F1F3F5;
  --gray-50:   #F6F7F9;
  --surface:   #FFFFFF;
  --canvas:    #F4F6F7;

  /* Status */
  --orange:    #F2820D;
  --orange-bg: #FEF1E1;
  --red:       #E2483B;
  --red-bg:    #FCEBEA;
  --blue:      #2F7DE1;
  --blue-bg:   #E9F1FC;
  --purple:    #7C5CE6;
  --teal:      #18A5A5;
  --pink:      #E85D9B;

  /* Radii */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --sh-md: 0 4px 14px rgba(16,24,40,.08);
  --sh-lg: 0 12px 32px rgba(16,24,40,.12);
  --sh-card: 0 1px 0 rgba(16,24,40,.04), 0 1px 6px rgba(16,24,40,.05);

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { background: var(--canvas); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-md);
  font-weight: 700; font-size: 16px; line-height: 1;
  padding: 0 18px; height: 50px;
  transition: filter .14s ease, background .14s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-500); color: #fff; }
.btn-primary:hover { background: var(--green-600); }
.btn-block { width: 100%; }
.btn-ghost { background: var(--gray-100); color: var(--ink-2); }
.btn-ghost:hover { background: var(--gray-200); }
.btn-outline { background: #fff; color: var(--ink-2); border: 1px solid var(--gray-300); }
.btn-outline:hover { background: var(--gray-50); }
.btn-sm { height: 38px; font-size: 14px; border-radius: var(--r-sm); padding: 0 14px; }
.btn-xs { height: 30px; font-size: 12.5px; border-radius: 7px; padding: 0 11px; font-weight: 600; }

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
}
.badge-green  { background: var(--green-50);  color: var(--green-600); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-gray   { background: var(--gray-100);  color: var(--gray-600); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-square { border-radius: 6px; padding: 4px 8px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

/* ---------- Court photo (CSS-crafted, photo-like indoor court) ---------- */
.court {
  position: relative; overflow: hidden;
  background:
    radial-gradient(72% 44% at 50% 2%, rgba(255,255,255,.22), transparent 62%),
    var(--court-floor, linear-gradient(180deg, #25405a 0%, #3a86bd 50%, #1c5078 100%));
}
/* perspective court outline: boundary + center + kitchen lines */
.court .court-net {
  position: absolute; left: 50%; top: 50%; width: 62%; height: 44%;
  transform: translateX(-50%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  border: 2px solid rgba(255,255,255,.55);
  pointer-events: none;
}
.court .court-net::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%); background: rgba(255,255,255,.42);
}
.court .court-net::after {
  content: ""; position: absolute; left: -16%; right: -16%; top: 42%; height: 2px;
  background: rgba(255,255,255,.6);
}
.court-blue   { --court-floor: linear-gradient(180deg,#26415a 0%,#3a86bd 50%,#1c5078 100%); }
.court-green  { --court-floor: linear-gradient(180deg,#1d4030 0%,#34a06a 50%,#175a3d 100%); }
.court-teal   { --court-floor: linear-gradient(180deg,#173f44 0%,#23a3a8 50%,#125a5f 100%); }
.court-purple { --court-floor: linear-gradient(180deg,#2f2b50 0%,#6a61c4 50%,#383180 100%); }
.court-slate  { --court-floor: linear-gradient(180deg,#323c4a 0%,#62718a 50%,#39444f 100%); }

/* ---------- Scroll niceties ---------- */
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 8px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { scrollbar-width: none; }

/* ---------- Phone screen shell (no device bezel) ---------- */
.phone {
  width: 390px; height: 844px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--gray-200);
}
.statusbar {
  height: 44px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 26px;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.statusbar .sb-icons { display: flex; align-items: center; gap: 6px; }

/* utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.grow { flex: 1; }
.muted { color: var(--gray-600); }
.tnum { font-variant-numeric: tabular-nums; }