/* ========================================
   T.SERRA-GES - VARIABLES CSS
   Design System - Variables Globales
   ======================================== */

:root {
  /* === COLORES CORPORATIVOS === */
  --color-naranja-principal: #ff7f1e;
  --color-naranja-hover: #e6710f;
  --color-naranja-light: #fff7ed;
  --color-naranja-dark: #cc6518;

  --color-gris-principal: #52525b;
  --color-gris-dark: #3f3f46;
  --color-gris-light: #a1a1aa;

  /* === TEMA CLARO (por defecto) === */
  --bg-principal: #f4f4f5;
  --bg-card: #ffffff;
  --bg-input: #fafafa;
  --bg-hover: #f3f4f6;

  --texto-principal: #18181b;
  --texto-secundario: #6b7280;
  --texto-disabled: #9ca3af;

  --borde-principal: #e4e4e7;
  --borde-input: #d1d5db;
  --borde-focus: #6366f1;

  /* === COLORES SEMÁNTICOS === */
  --color-exito: #22c55e;
  --color-exito-bg: #f0fdf4;
  --color-exito-text: #166534;

  --color-error: #ef4444;
  --color-error-bg: #fef2f2;
  --color-error-text: #991b1b;

  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-text: #92400e;

  --color-info: #3b82f6;
  --color-info-bg: #eff6ff;
  --color-info-text: #1e40af;

  /* === TIPOGRAFÍA === */
  --fuente-principal:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fuente-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  --texto-xs: 11px;
  --texto-sm: 13px;
  --texto-base: 14px;
  --texto-md: 15px;
  --texto-lg: 16px;
  --texto-xl: 18px;
  --texto-2xl: 24px;
  --texto-3xl: 32px;

  --peso-normal: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* === ESPACIADO === */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 12px;
  --espacio-lg: 16px;
  --espacio-xl: 24px;
  --espacio-2xl: 32px;
  --espacio-3xl: 48px;

  /* === BORDER RADIUS === */
  --radio-sm: 6px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-xl: 16px;
  --radio-full: 9999px;

  /* === SOMBRAS === */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sombra-md: 0 1px 4px rgba(0, 0, 0, 0.08);
  --sombra-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sombra-xl: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* === LAYOUT === */
  --header-height: 64px;
  --footer-height: 48px;

  /* === TRANSICIONES === */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
  --transition-slow: 0.3s;
}

/* === TEMA OSCURO === */
[data-theme='dark'] {
  --bg-principal: #18181b;
  --bg-card: #27272a;
  --bg-input: #3f3f46;
  --bg-hover: #52525b;

  --texto-principal: #fafafa;
  --texto-secundario: #a1a1aa;
  --texto-disabled: #71717a;

  --borde-principal: #3f3f46;
  --borde-input: #52525b;
  --borde-focus: #818cf8;

  /* Colores semánticos ajustados para tema oscuro */
  --color-exito-bg: #14532d;
  --color-exito-text: #86efac;

  --color-error-bg: #7f1d1d;
  --color-error-text: #fca5a5;

  --color-warning-bg: #78350f;
  --color-warning-text: #fcd34d;

  --color-info-bg: #1e3a8a;
  --color-info-text: #93c5fd;

  /* Sombras más intensas en tema oscuro */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-md: 0 1px 4px rgba(0, 0, 0, 0.4);
  --sombra-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
  --sombra-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
}