/* ============================================================
   variables.css — Tokens base (alineados al referente de diseño)
   La capa final (theme.css) afina/confirma estos mismos valores.
   Fuente única: Manrope (cargada por theme.css). NO importar otra fuente.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand greens — referente */
  --g:       #146C43;
  --g2:      #1E9E5A;
  --g3:      #0B5132;
  --gl:      rgba(20, 108, 67, 0.10);
  --g-hover: rgba(20, 108, 67, 0.16);

  /* Pay accent (wine) — usado en flujos de cobro/torneos */
  --wine:    #6B1D3D;
  --wine-l:  #FBE7EF;

  /* Semantic colors — referente */
  --gold:    #B5740B;
  --gold-l:  rgba(181, 116, 11, 0.12);
  --red:     #C23535;
  --red-l:   rgba(194, 53, 53, 0.10);
  --red-2:   rgb(138, 2, 2);
  --blue:    #2563EB;
  --blue-l:  rgba(37, 99, 235, 0.10);

  /* Surfaces — referente */
  --bg:       #EEF1EA;
  --surface:  #FFFFFF;
  --surface2: #F6F8F3;
  --border:   #DDE4D7;

  /* Text — referente */
  --text:   #18211A;
  --text2:  #3C463B;
  --muted:  #5F6B5C;

  /* Sidebar */
  --sidebar-bg:   #10261A;
  --sidebar-text: rgba(255, 255, 255, 0.72);

  /* Radios alineados al referente */
  --radius-sm:  9px;
  --radius-md:  11px;
  --radius-lg:  16px;
  --shadow-card: 0 1px 2px rgba(16,38,26,.06), 0 6px 20px rgba(16,38,26,.05);
  --shadow-app:  0 24px 60px rgba(0,0,0,.30), 0 4px 16px rgba(0,0,0,.08);

  /* Font — única: Manrope */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Modo oscuro por instancia (D5 · beta) ─────────────────────────────────
   Redefine los tokens neutros; las marcas (--g, etc.) se mantienen. Las
   superficies que usan var(--surface)/var(--bg)/var(--border) se adaptan solas. */
body.dark {
  --bg:       #0F1512;
  --surface:  #18211C;
  --surface2: #141B17;
  --border:   #2C3730;
  --text:     #E9EEE9;
  --text2:    #B7C1B7;
  --muted:    #8C988C;
  --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.40);
  color-scheme: dark;
}
/* Inputs/áreas con color hardcodeado que no son tokens */
body.dark input.brand-input, body.dark .form-input, body.dark .brand-input,
body.dark textarea, body.dark .attn-notes textarea { background: var(--surface2); color: var(--text); }
body.dark .attn-notes textarea:focus { background: var(--surface); }