/* ============================================================
   AcuPet · tokens
   Único sitio donde se declaran color, tipo y espaciado.
   Sustituye a los tres primarios distintos que conviven hoy:
     #15A5BC (style.css) · #1976D2 (auth/login) · #2563EB (admin/users)
   El primario elegido es el de style.css, que es el que coincide
   con el cian del logo.
   ============================================================ */

:root {
  /* --- Marca: los dos extremos del degradado del logo --- */
  --brand-green: #2fb98a;
  --brand-cyan:  #15a5bc;
  --brand-grad:  linear-gradient(90deg, var(--brand-green), var(--brand-cyan));

  /* --- Acento --- */
  --accent:        #15a5bc;
  --accent-deep:   #0e7f92;  /* hover / texto sobre claro */
  --accent-soft:   #e3f4f7;  /* fondos de estado */
  --accent-line:   #a9dbe4;

  /* --- Neutros: sesgados a cian, no grises puros --- */
  --ground:   #f1f6f8;  /* fondo de página */
  --surface:  #ffffff;  /* tarjetas y tabla */
  --surface-2:#f7fafb;  /* thead, barras */
  --line:     #dde8eb;
  --line-soft:#eaf1f3;
  --ink:      #10303a;  /* texto principal */
  --ink-2:    #3d626c;  /* texto secundario */
  --muted:    #6b8b94;  /* metadatos, unidades */
  --dark:     #0d2830;  /* footer */
  --dark-ink: #b9d3d8;  /* texto sobre --dark */

  /* --- Semánticos: independientes del acento --- */
  --ok:    #1a8f63;
  --ok-bg: #e2f4ec;
  --warn:    #a8650a;
  --warn-bg: #fbf0dd;
  --crit:    #b53a30;
  --crit-bg: #fbe7e5;

  /* --- Tipografía --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;   /* base, la del style.css actual */
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* --- Espaciado --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --shadow:    0 1px 2px rgba(16, 48, 58, .05), 0 1px 3px rgba(16, 48, 58, .04);
  --shadow-up: 0 -1px 3px rgba(16, 48, 58, .06);

  --header-h: 56px;
  --max-w: 1680px;
}

/* Reset mínimo, sin tocar el del style.css actual */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}