/* ==========================================================================
   Design Tokens — ERP Distribuidora Cárdenas
   Paleta: tonalidades de Verde + Blanco. El negro/gris muy oscuro se usa
   únicamente para texto, nunca como color de fondo o superficie.
   Tema por defecto: oscuro (fondo verde muy oscuro). Alternativa: claro
   (data-theme="light", fondo blanco).
   ========================================================================== */

:root {
  /* Escala Verde Bosque (superficies en dark) */
  --green-950: #051912;
  --green-900: #0a231a;
  --green-800: #0f2f22;
  --green-700: #163f2d;
  --green-600: #1f5139;
  --green-500: #2c6b4a;

  /* Escala Verde Esmeralda (acento primario) */
  --emerald-700: #0a7a4a;
  --emerald-600: #0f9d58;
  --emerald-500: #16b869;
  --emerald-400: #4ade80;
  --emerald-300: #86efac;

  /* Escala neutra (blancos y grises muy claros, con ligero sesgo verde) */
  --gray-50:  #f7faf8;
  --gray-100: #edf3ef;
  --gray-200: #dfe8e2;
  --gray-300: #c6d4cb;
  --gray-400: #99ac9f;
  --gray-500: #6c7d71;
  --gray-600: #4c5c50;
  --gray-700: #334036;
  --gray-800: #1f2923;
  --gray-900: #121a15;

  /* Semántico (estable en ambos temas). Success/Info se mantienen en la
     familia verde; warning/danger conservan ámbar y rojo por legibilidad
     de alertas (stock crítico, vencimientos), el resto de la interfaz es
     100% verde + blanco + negro (solo texto). */
  --success: #17b26a;
  --success-bg: rgba(23, 178, 106, .12);
  --warning: #f79009;
  --warning-bg: rgba(247, 144, 9, .12);
  --danger: #f04438;
  --danger-bg: rgba(240, 68, 56, .12);
  --info: #2f9e44;
  --info-bg: rgba(47, 158, 68, .12);

  /* Tipografía */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-xxl: 2.25rem;

  /* Espaciado (base 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Transiciones */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --navbar-h: 64px;
}

/* ---------- Tema oscuro (por defecto): fondo verde muy oscuro, texto blanco ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: var(--green-950);
  --bg-surface: var(--green-900);
  --bg-surface-2: var(--green-800);
  --bg-elevated: var(--green-700);
  --bg-hover: rgba(255, 255, 255, .045);

  --border-color: rgba(255, 255, 255, .08);
  --border-color-strong: rgba(255, 255, 255, .14);

  /* En dark, el texto es blanco (nunca negro sobre fondo oscuro) */
  --text-primary: #f5faf7;
  --text-secondary: #b9ccbf;
  --text-muted: #7c9384;

  --accent: var(--emerald-500);
  --accent-strong: var(--emerald-400);
  --accent-contrast: #ffffff;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --shadow-3: 0 24px 64px rgba(0,0,0,.5);

  --gradient-brand: linear-gradient(135deg, #0a7a4a 0%, #0f9d58 45%, #4ade80 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

/* ---------- Tema claro: fondo blanco, texto negro ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-app: var(--gray-50);
  --bg-surface: #ffffff;
  --bg-surface-2: var(--gray-100);
  --bg-elevated: #ffffff;
  --bg-hover: rgba(10, 26, 18, .04);

  --border-color: rgba(10, 26, 18, .09);
  --border-color-strong: rgba(10, 26, 18, .16);

  /* En light, el texto es negro/gris muy oscuro (unica funcion del negro) */
  --text-primary: #0c1510;
  --text-secondary: #45564b;
  --text-muted: #7c8f81;

  --accent: var(--emerald-600);
  --accent-strong: var(--emerald-700);
  --accent-contrast: #ffffff;

  --shadow-1: 0 1px 2px rgba(10,26,18,.06), 0 1px 1px rgba(10,26,18,.04);
  --shadow-2: 0 8px 24px rgba(10,26,18,.08);
  --shadow-3: 0 24px 64px rgba(10,26,18,.14);

  --gradient-brand: linear-gradient(135deg, #0a7a4a 0%, #0f9d58 45%, #4ade80 100%);
  --gradient-surface: linear-gradient(180deg, rgba(10,26,18,.02), rgba(10,26,18,0));
}

/* Respeta preferencia del sistema si el usuario aun no eligio (sin atributo) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-app: var(--gray-50);
    --bg-surface: #ffffff;
    --bg-surface-2: var(--gray-100);
    --bg-elevated: #ffffff;
    --bg-hover: rgba(10, 26, 18, .04);
    --border-color: rgba(10, 26, 18, .09);
    --border-color-strong: rgba(10, 26, 18, .16);
    --text-primary: #0c1510;
    --text-secondary: #45564b;
    --text-muted: #7c8f81;
    --accent: var(--emerald-600);
    --accent-strong: var(--emerald-700);
    --shadow-1: 0 1px 2px rgba(10,26,18,.06), 0 1px 1px rgba(10,26,18,.04);
    --shadow-2: 0 8px 24px rgba(10,26,18,.08);
    --shadow-3: 0 24px 64px rgba(10,26,18,.14);
  }
}