/* ============================================================
 * Sima Design Tokens
 * Sistema Integral de Manejo de Aguas
 *
 * Prefijo: --sima-
 * Carga: antes que cualquier otro CSS de la aplicación.
 * Uso:   var(--sima-water-500), var(--sima-space-4), etc.
 *
 * Estos tokens NO reemplazan estilos existentes.
 * Son la base para el rework visual progresivo.
 * ============================================================ */

:root {
  /* ----------------------------------------------------------
   * Water — Azules institucionales (SIMA Hydric Premium)
   * Sidebar, headers, enlaces, botones primarios, indicadores
   * ---------------------------------------------------------- */
  --sima-water-50:  #e3e6ff;
  --sima-water-100: #dce1ff;
  --sima-water-200: #b6c4ff;
  --sima-water-300: #8da3ff;
  --sima-water-400: #5c7dff;
  --sima-water-500: #0041c8;   /* Primary */
  --sima-water-600: #0039b3;
  --sima-water-700: #002b80;   /* Deep Water navy */
  --sima-water-800: #001551;
  --sima-water-900: #000d33;
  --sima-water-950: #00061a;

  /* ----------------------------------------------------------
   * Nature — Verdes naturales y acuáticos (SIMA Hydric Premium)
   * Estados "normal", valores en rango, éxito, badges positivos
   * ---------------------------------------------------------- */
  --sima-nature-50:  #e6f7f0;
  --sima-nature-100: #c6f0df;
  --sima-nature-200: #8de2c1;
  --sima-nature-300: #4ed4a2;
  --sima-nature-400: #2bc48a;
  --sima-nature-500: #10b981;   /* Secondary - Emerald */
  --sima-nature-600: #006c49;
  --sima-nature-700: #005236;
  --sima-nature-800: #003922;
  --sima-nature-900: #002113;
  --sima-nature-950: #00140a;

  /* ----------------------------------------------------------
   * Alert — Rojos de alerta y críticos
   * Valores fuera de rango, alarmas, errores, eliminaciones
   * ---------------------------------------------------------- */
  --sima-alert-50:  #fce8e6;
  --sima-alert-100: #f8d2ce;
  --sima-alert-200: #f1a89e;
  --sima-alert-300: #ea7e6e;
  --sima-alert-400: #e2553e;
  --sima-alert-500: #d93025;
  --sima-alert-600: #a9241c;
  --sima-alert-700: #7e1b14;
  --sima-alert-800: #52120d;
  --sima-alert-900: #2e0a07;
  --sima-alert-950: #1a0504;

  /* ----------------------------------------------------------
   * Warning — Ámbar de advertencia
   * Atención, precaución, valores borderline
   * ---------------------------------------------------------- */
  --sima-warning-50:  #fef7e0;
  --sima-warning-100: #fef0c2;
  --sima-warning-200: #fde188;
  --sima-warning-300: #fcd34f;
  --sima-warning-400: #fbc51d;
  --sima-warning-500: #f9ab00;
  --sima-warning-600: #c78900;
  --sima-warning-700: #956700;
  --sima-warning-800: #634400;
  --sima-warning-900: #3b2800;
  --sima-warning-950: #1f1400;

  /* ----------------------------------------------------------
   * Surface — Fondos (SIMA Hydric Premium)
   * Páginas, cards, contenedores, separadores
   * ---------------------------------------------------------- */
  --sima-surface-000: #ffffff;
  --sima-surface-050: #f8f9fa;
  --sima-surface-100: #f3f4f5;
  --sima-surface-200: #e1e3e4;
  --sima-surface-300: #c3c5d9;

  /* ----------------------------------------------------------
   * Text — Colores de texto (SIMA Hydric Premium)
   * Principal, secundario, terciario, placeholders
   * ---------------------------------------------------------- */
  --sima-text-900: #191c1d;
  --sima-text-700: #434656;
  --sima-text-600: #737688;
  --sima-text-400: #c3c5d9;

  /* ----------------------------------------------------------
   * Outline — Bordes y separadores
   * ---------------------------------------------------------- */
  --sima-outline: #737688;
  --sima-outline-variant: #c3c5d9;

  /* ----------------------------------------------------------
   * Spacing — Escala de espaciado (múltiplos de 4px)
   * Márgenes, paddings, gaps
   * ---------------------------------------------------------- */
  --sima-space-1:  0.25rem;  /*  4px */
  --sima-space-2:  0.5rem;   /*  8px */
  --sima-space-3:  0.75rem;  /* 12px */
  --sima-space-4:  1rem;     /* 16px */
  --sima-space-5:  1.25rem;  /* 20px */
  --sima-space-6:  1.5rem;   /* 24px */
  --sima-space-8:  2rem;     /* 32px */
  --sima-space-10: 2.5rem;   /* 40px */
  --sima-space-12: 3rem;     /* 48px */
  --sima-space-16: 4rem;     /* 64px */

  /* ----------------------------------------------------------
   * Radius — Bordes redondeados (SIMA Hydric Premium)
   * Cards, botones, modales, inputs, badges
   * ---------------------------------------------------------- */
  --sima-radius-sm:   0.25rem;  /*  4px */
  --sima-radius-md:   0.5rem;   /*  8px */
  --sima-radius-lg:   0.75rem;  /* 12px */
  --sima-radius-xl:   0.75rem;  /* 12px - matches Stitch rounded-xl */
  --sima-radius-full: 9999px;   /* pill / circle */

  /* ----------------------------------------------------------
   * Shadow — Sombras (SIMA Hydric Premium)
   * Elevación, profundidad, jerarquía visual
   * ---------------------------------------------------------- */
  --sima-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.04);
  --sima-shadow-md:   0 4px 14px rgb(0 65 200 / 0.15);
  --sima-shadow-lg:   0 8px 32px rgb(0 21 81 / 0.2);
  --sima-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --sima-shadow-btn:  0 4px 14px rgb(0 65 200 / 0.25);

  /* ----------------------------------------------------------
   * Font — Tipografía
   * Familias y tamaños base
   * ---------------------------------------------------------- */
  --sima-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sima-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  --sima-text-xs:   0.75rem;   /* 12px */
  --sima-text-sm:   0.875rem;  /* 14px */
  --sima-text-base: 1rem;      /* 16px */
  --sima-text-lg:   1.125rem;  /* 18px */
  --sima-text-xl:   1.25rem;   /* 20px */
  --sima-text-2xl:  1.5rem;    /* 24px */
  --sima-text-3xl:  1.875rem;  /* 30px */
}