/* ============================================================
   SILVIA JOYERÍA · Design Tokens — ÚNICA fuente de verdad
   Colores, sombras, radios, tipografía y breakpoints.
   Cargar SIEMPRE primero, antes de cualquier otra hoja.
   Ningún otro archivo debe declarar :root ni hex de marca.
   ============================================================ */
:root {
  /* ── Marca · verde ─────────────────────────────────────── */
  --green:        #163d30;
  --green-dark:   #122f25;
  --green-2:      #1c7a4a;
  --green-3:      #2f9d63;
  --green-soft:   #e4f0e9;
  --green-line:   #cfe2d6;

  /* ── Marca · oro ───────────────────────────────────────── */
  --gold:         #c39a5c;
  --gold-deep:    #a8843f;
  --gold-soft:    #e6d3ad;

  /* ── Superficies ───────────────────────────────────────── */
  --paper:        #ffffff;
  --bg:           #ffffff;
  --white:        #ffffff;
  --cream:        #f7f0e4;
  --cream-2:      #faf5ec;
  --tag:          #e9dcc3;
  --tag-text:     #7a5f31;

  /* ── Texto / tinta ─────────────────────────────────────── */
  --ink:          #1f2421;
  --ink-2:        #3c443e;
  --muted:        #6b7670;
  --muted-2:      #9aa39c;

  /* ── Líneas / bordes ───────────────────────────────────── */
  --line:         #e7e1d5;
  --line-2:       #efe9dd;

  /* ── Escala de grises cálida (vistas de la app principal) ─ */
  --gray-50:      #faf5ec;
  --gray-100:     #f0e9d8;
  --gray-200:     #e7e1d5;
  --gray-300:     #d5cfc5;
  --gray-400:     #9aa39c;
  --gray-500:     #6b7670;
  --gray-600:     #4d5450;
  --gray-700:     #3c443e;
  --gray-800:     #2a302c;
  --gray-900:     #1f2421;

  /* ── Semánticos ────────────────────────────────────────── */
  --success:      #2f9d63;
  --success-50:   #e4f0e9;
  --warning:      #c8832a;
  --warning-50:   #fdf3e4;
  --danger:       #b4533a;
  --danger-50:    #faeae6;
  --ok:           #2f9d63;
  --strike:       #c98b8b;

  /* ── Sombras teñidas de verde ──────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(22, 61, 48, .05);
  --shadow:       0 4px 12px rgba(22, 61, 48, .06);
  --shadow-md:    0 4px 20px rgba(22, 61, 48, .08);
  --shadow-lg:    0 10px 15px -3px rgba(22, 61, 48, .10), 0 4px 6px -2px rgba(22, 61, 48, .05);
  --shadow-hover: 0 8px 24px rgba(22, 61, 48, .14);
  --shadow-card:  0 1px 2px rgba(22, 61, 48, .04), 0 6px 20px rgba(22, 61, 48, .06);

  /* ── Radios ────────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    16px;

  /* ── Tipografía / layout ───────────────────────────────── */
  --font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --container-max: 1200px;

  /* ── Shell (drawer/sidebar) ────────────────────────────── */
  --sidebar-w:    300px;
  --bp-desktop:   1024px;
}

/* iOS hace zoom automático al enfocar un control con font-size < 16px.
   En móvil forzamos 16px en todos los campos para evitar ese salto/zoom. */
@media (max-width: 1024px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px;
  }
}