/* ══════════════════════════════════════════
   CARPINTERÍA 360 ERP – Design Tokens v2
   ══════════════════════════════════════════ */

:root {
  /* Brand */
  --orange:       #F5820A;
  --orange-dark:  #D06A00;
  --orange-light: #FF9A2E;
  --orange-glow:  rgba(245,130,10,.18);

  /* ERP Extended Palette */
  --wood:         #8B5E3C;
  --wood-light:   #C4956A;
  --wood-pale:    #F5EDE3;

  /* Neutrals (tema claro) */
  --black:   #0A0A0A;
  --dark:    #1A1A1A;  /* fondo "cromo oscuro" fijo: barras, toasts, banners (con texto claro encima) — NO cambia con el tema */
  --text:    #1A1A1A;  /* color principal de TEXTO — este SÍ cambia con el tema */
  --card:    #FFFFFF;
  --bg:      #F2F0EC;
  --border:  #E0D9D0;
  --muted:   #888888;
  --bone:    #F0EDE8;

  /* Status */
  --green:      #2E7D32;
  --green-bg:   #E8F5E9;
  --red:        #C62828;
  --red-bg:     #FFEBEE;
  --blue:       #1565C0;
  --blue-bg:    #E3F2FD;
  --purple:     #6A1B9A;
  --purple-bg:  #F3E5F5;
  --amber:      #E65100;
  --amber-bg:   #FFF3E0;
  --teal:       #00695C;
  --teal-bg:    #E0F2F1;
  --indigo:     #283593;
  --indigo-bg:  #E8EAF6;

  /* Spacing */
  --r:       14px;
  --r-sm:    9px;
  --r-lg:    20px;

  /* Shadow */
  --shadow:    0 2px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ── MODO OSCURO ──
   Antes: este bloque oscurecía --bg/--card/--border pero NUNCA invertía el
   color de TEXTO (usado en decenas de reglas). Resultado real: con el
   celular en modo oscuro, el texto quedaba casi negro sobre fondos casi
   negros — texto invisible en gran parte de la app.
   Ahora se invierte --text (y --muted), y --dark queda igual a propósito:
   es el fondo fijo de elementos "de cromo oscuro" (toasts, barras, banners)
   que ya llevan texto claro encima en ambos temas.
   Además se agrega [data-theme="dark"] para poder alternar el tema
   manualmente desde un botón (no solo seguir la preferencia del sistema).
   El selector manual tiene prioridad sobre la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card:   #1E1E1E;
    --bg:     #111111;
    --border: #333333;
    --text:   #F2F0EC;   /* antes seguía siendo casi negro: bug de contraste */
    --muted:  #A8A8A8;   /* antes #777777 apenas se distinguía sobre fondos oscuros */
    --bone:   #262220;
    --wood-pale: #2A1F15;
  }
}
[data-theme="dark"] {
  --card:   #1E1E1E;
  --bg:     #111111;
  --border: #333333;
  --text:   #F2F0EC;
  --muted:  #A8A8A8;
  --bone:   #262220;
  --wood-pale: #2A1F15;
}
[data-theme="light"] {
  --card:   #FFFFFF;
  --bg:     #F2F0EC;
  --border: #E0D9D0;
  --text:   #1A1A1A;
  --muted:  #888888;
  --bone:   #F0EDE8;
  --wood-pale: #F5EDE3;
}