/* ============================================================
   Pickleball Republic · Design tokens
   El lima es acento, no fondo. Máximo un lima protagonista por vista.
   ============================================================ */
:root {
  /* Marca */
  --ps-green-950: #0B2E29;
  --ps-green-900: #103B34;
  --ps-green-700: #1C544A;
  --ps-lime-400:  #E8F405;
  --ps-lime-300:  #F1F95E;
  --ps-lime-100:  #FAFDD0;

  /* Neutros / superficies */
  --ps-bg:       #F4F6F3;
  --ps-surface:  #FFFFFF;
  --ps-ink:      #10201C;
  --ps-ink-soft: #5A6B66;
  --ps-line:     #E3E9E4;

  /* Semánticos */
  --ps-ok:     #23A26D;
  --ps-warn:   #E9A13B;
  --ps-danger: #E14D45;
  --ps-info:   #3B82C4;

  /* Niveles */
  --lvl-inic:  #8ECDBB;
  --lvl-inter: #4FB08C;
  --lvl-avanz: #2E7D5F;
  --lvl-comp:  #103B34;

  /* Radios */
  --radius-lg:   20px;
  --radius-md:   14px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-card: 0 1px 2px rgba(16,32,28,.04), 0 8px 24px rgba(16,32,28,.06);
  --shadow-pop:  0 12px 40px rgba(16,32,28,.16);

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Métricas de layout */
  --sidebar-w: 260px;
  --topbar-h:  64px;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ps-ink);
  background: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
h2 { font-size: 20px; line-height: 28px; }
h3 { font-size: 16px; line-height: 24px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ps-green-700); outline-offset: 2px; }
::selection { background: var(--ps-lime-300); color: var(--ps-green-950); }