/* ==========================================================================
   OdontoCloud — tokens de diseño
   Spec: docs/superpowers/specs/2026-09-07-odontocloud-diseno-visual.md §2.2
   Fuente: docs/superpowers/diseno/tokens.css (artefacto de diseño aprobado)

   Regla: los componentes consumen tokens, nunca valores sueltos.
   Personalidad: clínico moderno y cálido.
   Sin modo oscuro en v1: los alias semánticos dejan la puerta abierta.
   ========================================================================== */

:root {
  /* --- Marca: teal ------------------------------------------------------ */
  --teal-50:  #EEF8F8;
  --teal-100: #D5EFEF;
  --teal-200: #ADE0E1;
  --teal-300: #79CDCE;
  --teal-400: #3EB5B7;
  --teal-500: #1AA0A2;
  --teal-600: #0E8183; /* primario: relleno de botón con texto blanco */
  --teal-700: #0D6F72; /* hover del primario, enlaces sobre blanco */
  --teal-800: #0A5457; /* texto de marca, panel del login */
  --teal-900: #073B3D;

  /* --- Acento cálido: coral --------------------------------------------- */
  --coral-50:  #FDF2EF;
  --coral-100: #FADFD8;
  --coral-200: #F6C2B6;
  --coral-300: #F09C88;
  --coral-400: #EC8570;
  --coral-500: #E8735A; /* solo decorativo: filetes, iconos grandes */
  --coral-600: #C3503C; /* relleno de .btn-acento con texto blanco */
  --coral-700: #A94330; /* hover del acento, texto de acento sobre blanco */
  --coral-800: #7E3224;

  /* --- Neutros (teñidos hacia el teal para dar cohesión) ----------------- */
  --gris-50:  #F4F7F6; /* fondo de página */
  --gris-100: #E8EEED;
  --gris-200: #D8E1E0; /* líneas y separadores decorativos */
  --gris-300: #C0CDCC;
  --gris-400: #818F8E; /* borde de controles: cumple 3:1 */
  --gris-500: #687877; /* texto de pista y placeholder */
  --gris-600: #52615F; /* texto secundario */
  --gris-700: #3B4948;
  --gris-800: #283433;
  --gris-900: #16201F; /* texto */

  /* --- Semánticos ------------------------------------------------------- */
  --exito:    #1B7A4E;
  --exito-bg: #E5F4EB;
  --aviso:    #8A5A08;
  --aviso-bg: #FBF0DB;
  --error:    #B3261E;
  --error-bg: #FBE9E7;
  --info:     #0F6C9E;
  --info-bg:  #E5F1F9;

  /* --- Alias semánticos: lo que usan los componentes --------------------- */
  --color-primario:       var(--teal-600);
  --color-primario-hover: var(--teal-700);
  --color-acento:         var(--coral-600);
  --color-acento-hover:   var(--coral-700);
  --fondo:                var(--gris-50);
  --superficie:           #FFFFFF;
  --superficie-suave:     var(--gris-100);
  --texto:                var(--gris-900);
  --texto-suave:          var(--gris-600);
  --texto-pista:          var(--gris-500);
  --linea:                var(--gris-200);
  --linea-fuerte:         var(--gris-400); /* bordes de control (WCAG 1.4.11) */
  --foco:                 var(--teal-600);

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.375rem;  /* 22 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.25rem;   /* 36 */
  --t-4xl:  3rem;      /* 48 */
  --peso-normal: 400;
  --peso-medio:  600;
  --peso-fuerte: 700;
  --interlinea-titulo: 1.12;
  --interlinea-texto:  1.6;

  /* --- Espaciado: escala de 4 px ---------------------------------------- */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  20px;
  --e-6:  24px;
  --e-8:  32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-24: 96px;

  /* --- Radios ----------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* --- Sombras (nada de sombra en reposo sobre tarjetas) ----------------- */
  --sombra-1: 0 2px 4px rgba(10, 84, 87, .06), 0 8px 20px rgba(10, 84, 87, .08);
  --sombra-2: 0 4px 8px rgba(10, 84, 87, .08), 0 20px 48px rgba(10, 84, 87, .16);

  /* --- Movimiento ------------------------------------------------------- */
  --rapido: 120ms;
  --normal: 200ms;
  --curva:  cubic-bezier(.2, .8, .2, 1);
  --brillo: 1400ms; /* único bucle largo: el esqueleto de carga */

  /* --- Medidas del armazón ---------------------------------------------- */
  --ancho-lateral: 240px;
  --ancho-max:     1200px;
  --alto-barra:    64px;  /* barra inferior en teléfono */
  --tactil:        44px;  /* área táctil mínima */
}

/* ==========================================================================
   TABLA DE CONTRASTES (WCAG 2.1)
   Mínimos: texto normal y texto secundario 4.5:1 · texto grande y elementos
   de interfaz (bordes de control, anillo de foco) 3:1.

   tests/Core/ContrasteTest.php recalcula cada pareja del bloque PAREJAS-AA
   de abajo y falla si el contraste real baja de su columna "mínimo" o si no
   coincide con el número declarado. Formato de cada línea:
     --frente | --fondo | contraste-declarado | mínimo-exigible
   Para regenerar tras tocar un color:
     ~/.local/php85/bin/php scripts/contraste.php

   PAREJAS-AA
   --gris-900   | --gris-50    | 15.46 | 4.5
   --gris-900   | #ffffff      | 16.66 | 4.5
   --gris-600   | #ffffff      | 6.49  | 4.5
   --gris-600   | --gris-50    | 6.02  | 4.5
   --gris-600   | --gris-100   | 5.53  | 4.5
   --gris-500   | #ffffff      | 4.62  | 4.5
   --gris-700   | --gris-100   | 8.01  | 4.5
   --teal-800   | #ffffff      | 8.68  | 4.5
   --teal-800   | --teal-50    | 8.03  | 4.5
   --teal-700   | #ffffff      | 5.94  | 4.5
   --teal-700   | --gris-50    | 5.51  | 4.5
   --teal-700   | --teal-50    | 5.49  | 4.5
   #ffffff      | --teal-600   | 4.68  | 4.5
   #ffffff      | --teal-700   | 5.94  | 4.5
   #ffffff      | --teal-800   | 8.68  | 4.5
   --teal-100   | --teal-800   | 7.20  | 4.5
   --teal-200   | --teal-800   | 6.01  | 4.5
   #ffffff      | --coral-600  | 4.63  | 4.5
   #ffffff      | --coral-700  | 5.94  | 4.5
   --coral-700  | #ffffff      | 5.94  | 4.5
   --coral-700  | --coral-50   | 5.41  | 4.5
   --exito      | #ffffff      | 5.33  | 4.5
   --exito      | --exito-bg   | 4.69  | 4.5
   #ffffff      | --exito      | 5.33  | 4.5
   --aviso      | #ffffff      | 5.92  | 4.5
   --aviso      | --aviso-bg   | 5.24  | 4.5
   --error      | #ffffff      | 6.54  | 4.5
   --error      | --error-bg   | 5.58  | 4.5
   #ffffff      | --error      | 6.54  | 4.5
   --info       | #ffffff      | 5.74  | 4.5
   --info       | --info-bg    | 5.00  | 4.5
   --gris-700   | --gris-200   | 7.06  | 4.5
   --gris-900   | --teal-50    | 15.40 | 4.5
   --gris-800   | --gris-50    | 11.96 | 3
   --teal-600   | #ffffff      | 4.68  | 3
   --gris-400   | #ffffff      | 3.36  | 3
   --gris-400   | --gris-50    | 3.12  | 3
   --teal-600   | --gris-50    | 4.34  | 3
   --teal-600   | --teal-50    | 4.33  | 3
   --coral-600  | #ffffff      | 4.63  | 3
   --gris-400   | --teal-50    | 3.11  | 3
   #ffffff      | --gris-800   | 12.89 | 4.5
   --gris-200   | --gris-900   | 12.51 | 4.5
   --gris-300   | --gris-900   | 10.19 | 4.5
   --gris-400   | --gris-900   | 4.96  | 4.5

   --linea (gris-200) es decorativa: separa bloques que ya se distinguen por
   fondo y espacio, así que no le aplica el mínimo de 3:1. Todo borde que
   define un control usa --linea-fuerte (gris-400).
   ========================================================================== */