/* Sistema de Variables y Tokens de Diseño (Design Tokens) */
:root {
  /* Paleta Médica Primaria (Azul Zafiro / Salud / Confianza) */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  /* #0284c7 daba 4.1 sobre blanco y 4.1 con blanco encima: por debajo del
     4.5 que pide WCAG AA para texto normal, y falla en las dos direcciones
     —el nombre de la especialidad sobre la tarjeta, y el texto de los botones
     azules—. Este es el minimo oscurecimiento que pasa: 4.92 en ambas. */
  --primary-600: #0277b0;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  /* Acentos de Salud y Bienestar (Verde Menta / Éxito) */
  --accent-50: #ecfdf5;
  --accent-100: #d1fae5;
  --accent-500: #10b981;
  --accent-600: #059669;
  --accent-700: #047857;
  --accent-800: #036147;   /* hover de .btn-accent, que ahora parte del 700 */

  /* Tonos de Alerta / Estado */
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  /* --- Estados: peligro, aviso y exito ------------------------------
   *
   * POR QUE HACIAN FALTA
   * --------------------
   * Habia --danger-50, --danger-500 y --danger-600, y nada mas. Todo lo demas
   * --el rojo del texto de error, el ambar entero, el verde de exito-- estaba
   * escrito a mano en los componentes: 44 veces #b91c1c, 32 veces #92400e, 27
   * veces #fffbeb. Siempre haciendo lo mismo, siempre repetido.
   *
   * Eso tiene dos consecuencias. Una: cambiar el rojo de los errores obliga a
   * tocar cuarenta sitios. Y otra peor: un color escrito a pelo no responde al
   * modo oscuro, asi que un aviso ambar sobre fondo crema se queda ilegible en
   * cuanto el fondo se oscurece.
   *
   * Tres piezas por estado, que es lo que de verdad se usa: el color del
   * TEXTO, el FONDO de la caja y el BORDE. Nada mas, porque nada mas hacia
   * falta en 662 usos.
   */
  --danger-50:   #fef2f2;   /* fondo de una caja de error */
  --danger-200:  #fecaca;   /* su borde */
  --danger-500:  #ef4444;
  --danger-600:  #dc2626;   /* relleno con texto blanco encima */
  --danger-700:  #b91c1c;   /* texto de error sobre fondo claro */

  --warning-50:  #fffbeb;
  --warning-200: #fde68a;
  --warning-500: #f59e0b;   /* barra o punto de aviso */
  --warning-600: #b45309;
  --warning-700: #92400e;   /* texto de aviso sobre fondo claro */

  --success-50:  #ecfdf5;
  --success-200: #a7f3d0;
  --success-700: #047857;   /* texto de exito sobre fondo claro */

  /* Escala de Grises y Superficies (Clean Modern) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;

  /* --slate-400 vuelve a su sitio en la rampa.
   *
   * QUE PASO
   * --------
   * Al arreglar el contraste (JEA-183) hubo que oscurecerlo de #94a3b8 a
   * #66707f, porque daba 2.56 sobre blanco y se usaba 52 de sus 59 veces como
   * color de texto. Era lo correcto entonces, pero cualquier gris que pase el
   * 4.5 sobre blanco cae ya en el territorio del 500: la rampa se quedo con
   * dos escalones a un pelo de distancia y perdio uno util.
   *
   * QUE SE HIZO
   * -----------
   * Los 64 usos de texto pasaron a --slate-500, que es donde debian estar. El
   * 400 recupera su valor claro y su papel: bordes, separadores, barras de
   * desplazamiento, acentos decorativos. Cosas que no se leen.
   *
   * LA REGLA, PARA NO REPETIRLO
   * ---------------------------
   * --slate-400 NO se usa para texto. Sobre blanco da 2.56 y no llega al 4.5
   * que pide WCAG AA. Para texto gris, el escalon mas claro que sirve es el
   * 500; para texto sobre fondo OSCURO la rampa no vale --un token de texto no
   * vale igual en claro que en oscuro-- y hay que poner un gris claro fijo.
   */
  --slate-400: #94a3b8;

  --slate-500: #5f6b7d;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Fondos y Textos */
  --bg-app: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --border-color: #e2e8f0;
  --border-color-subtle: #f1f5f9;

  /* macOS Chrome Tokens */
  --mac-bg-sidebar: #f6f8fa;
  --mac-border: rgba(0, 0, 0, 0.08);
  --mac-traffic-close: #ff5f56;
  --mac-traffic-min: #ffbd2e;
  --mac-traffic-zoom: #27c93f;

  /* Tipografía */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Sombras Modernas (Soft Elevation) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.15);

  /* Bordes Redondeados */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Dimensiones Móviles */
  --mobile-nav-height: 68px;
  --mobile-header-height: 64px;
  --max-mobile-width: 480px;
}