/* ==========================================================================
   Safira — tokens.css
   Las variables de diseño. Todo lo demás (base.css, componentes.css y las
   pantallas) usa estas variables y ningún valor suelto.

   Los cuatro colores de marca salen de ../../../Marca/MARCA.md, medidos sobre
   los archivos reales del kit. El resto (grises, estados) está derivado de
   esa paleta para que no desentone: los grises son cálidos, los estados son
   terrosos y apagados, nunca los colores "de semáforo" de un framework.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --------------------------------------------------------------------
     1. Colores de marca (exactos, no tocar)
     -------------------------------------------------------------------- */
  --color-petroleo: #115E66;   /* principal: logo, botones, enlaces */
  --color-crema:    #F3EFEB;   /* fondo de toda pantalla */
  --color-arena:    #DECCBE;   /* el logo sobre fondo petróleo */
  --color-tostado:  #CBB29F;   /* acento, nunca color de base */

  /* Escala del petróleo (el 600 es el de marca) */
  --petroleo-50:  #E8F0F1;
  --petroleo-100: #D1E2E3;
  --petroleo-200: #A8C8CA;
  --petroleo-300: #7DABAE;
  --petroleo-400: #4C8A8F;
  --petroleo-500: #2A6F76;
  --petroleo-600: #115E66;
  --petroleo-700: #0E4F56;
  --petroleo-800: #0B3F45;
  --petroleo-900: #082F34;

  /* Escala del tostado (el 200 es arena, el 300 es tostado de marca) */
  --tostado-50:  #F8F4F0;
  --tostado-100: #EFE6DE;
  --tostado-200: #DECCBE;
  --tostado-300: #CBB29F;
  --tostado-400: #B3967F;
  --tostado-500: #987A61;
  --tostado-600: #7C6350;
  --tostado-700: #5E4B3C;

  /* Grises neutros, cálidos (tiran a la crema, no al azul) */
  --gris-0:   #FFFFFF;
  --gris-25:  #FDFBF9;   /* blanco cálido: superficie de tarjetas */
  --gris-50:  #FAF7F4;
  --gris-100: #F3EFEB;   /* = crema */
  --gris-200: #E7E1DB;
  --gris-300: #D6CEC6;
  --gris-400: #B8AEA4;
  --gris-500: #8F857B;
  --gris-600: #6D645B;
  --gris-700: #504941;
  --gris-800: #36312C;
  --gris-900: #211E1B;

  /* --------------------------------------------------------------------
     2. Roles semánticos (lo que usan los componentes)
     -------------------------------------------------------------------- */
  --fondo:             var(--color-crema);
  --fondo-hundido:     #ECE6E0;            /* un paso más oscuro que la crema */
  --superficie:        var(--gris-25);     /* tarjetas, modales, campos */
  --superficie-suave:  var(--gris-50);     /* cabeceras de tabla, filas alternas */
  --superficie-marca:  var(--petroleo-50); /* fondos con tinte petróleo */
  --superficie-oscura: var(--petroleo-700);/* barra lateral, paneles oscuros */

  --tinta:               #1D2829;  /* texto principal, casi negro con tinte petróleo */
  --tinta-suave:         #56625F;  /* texto secundario (4.9:1 sobre crema) */
  --tinta-tenue:         #7E8886;  /* texto terciario, solo en tamaños grandes */
  --tinta-inversa:       var(--color-crema); /* texto sobre petróleo */
  --tinta-inversa-suave: var(--color-arena);

  --borde:        var(--gris-200);
  --borde-fuerte: var(--gris-300);
  --borde-marca:  var(--petroleo-200);

  --marca:         var(--petroleo-600);
  --marca-hover:   var(--petroleo-700);
  --marca-activo:  var(--petroleo-800);
  --marca-suave:   var(--petroleo-50);
  --marca-suave-2: var(--petroleo-100);

  --acento:        var(--tostado-300);
  --acento-suave:  var(--tostado-100);
  --acento-fuerte: var(--tostado-500);

  /* --------------------------------------------------------------------
     3. Estados, derivados de la paleta (terrosos, apagados)
     -------------------------------------------------------------------- */
  --exito:        #2F7A52;  /* verde salvia, 4.6:1 sobre crema */
  --exito-fuerte: #1F5A3B;
  --exito-suave:  #E1EFE5;
  --exito-borde:  #B6D4C0;

  --atencion:        #A86B16;  /* ocre, 4.5:1 sobre crema */
  --atencion-fuerte: #7D4F0E;
  --atencion-suave:  #F7ECD8;
  --atencion-borde:  #E6CFA3;

  --error:        #B2473B;  /* terracota, 5.1:1 sobre crema */
  --error-fuerte: #8A3329;
  --error-suave:  #F8E5E1;
  --error-borde:  #E8BAB2;

  --info:        var(--petroleo-500);
  --info-fuerte: var(--petroleo-700);
  --info-suave:  var(--petroleo-50);
  --info-borde:  var(--petroleo-200);

  /* Colores de los servicios (los valores de "color" en datos.js) */
  --servicio-teal:    var(--petroleo-500);
  --servicio-tostado: var(--tostado-500);
  --servicio-arena:   var(--tostado-400);
  --servicio-alerta:  var(--error);

  /* Tonos para el avatar con iniciales (se reparten por nombre) */
  --avatar-1-fondo: var(--petroleo-100);   --avatar-1-tinta: var(--petroleo-800);
  --avatar-2-fondo: var(--tostado-200);    --avatar-2-tinta: var(--tostado-700);
  --avatar-3-fondo: var(--exito-suave);    --avatar-3-tinta: var(--exito-fuerte);
  --avatar-4-fondo: var(--atencion-suave); --avatar-4-tinta: var(--atencion-fuerte);
  --avatar-5-fondo: var(--petroleo-200);   --avatar-5-tinta: var(--petroleo-900);
  --avatar-6-fondo: var(--tostado-100);    --avatar-6-tinta: var(--tostado-600);

  /* --------------------------------------------------------------------
     4. Tipografía
     -------------------------------------------------------------------- */
  --fuente: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --texto-xs:   0.75rem;    /* 12px: notas, sellos */
  --texto-sm:   0.8125rem;  /* 13px: ayudas, tablas compactas */
  --texto-base: 0.9375rem;  /* 15px: cuerpo */
  --texto-md:   1.0625rem;  /* 17px: cuerpo destacado, celular */
  --texto-lg:   1.25rem;    /* 20px: título de tarjeta */
  --texto-xl:   1.5rem;     /* 24px: título de sección */
  --texto-2xl:  1.875rem;   /* 30px: título de pantalla */
  --texto-3xl:  2.375rem;   /* 38px: cifras grandes, portada */
  --texto-4xl:  3rem;       /* 48px: solo en entrada/portada */

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-negrita: 700;
  --peso-extra:   800;

  --interlineado-apretado: 1.15;
  --interlineado-justo:    1.3;
  --interlineado-normal:   1.55;
  --interlineado-amplio:   1.7;

  --espaciado-letras-titulo: -0.015em;
  --espaciado-letras-sello:   0.06em;

  /* --------------------------------------------------------------------
     5. Espaciado (base 4px)
     -------------------------------------------------------------------- */
  --esp-0:  0;
  --esp-1:  0.25rem;   /* 4 */
  --esp-2:  0.5rem;    /* 8 */
  --esp-3:  0.75rem;   /* 12 */
  --esp-4:  1rem;      /* 16 */
  --esp-5:  1.25rem;   /* 20 */
  --esp-6:  1.5rem;    /* 24 */
  --esp-7:  1.75rem;   /* 28 */
  --esp-8:  2rem;      /* 32 */
  --esp-10: 2.5rem;    /* 40 */
  --esp-12: 3rem;      /* 48 */
  --esp-16: 4rem;      /* 64 */
  --esp-20: 5rem;      /* 80 */

  /* Medidas de layout */
  --ancho-angosto:       30rem;   /* 480: pantallas del cliente en celular */
  --ancho-medio:         46rem;   /* 736: formularios y fichas */
  --ancho-amplio:        75rem;   /* 1200: paneles de escritorio */
  --ancho-lateral:       16.5rem; /* 264: barra lateral de escritorio */
  --alto-barra:          3.75rem; /* 60: encabezado superior */
  --alto-barra-inferior: 4rem;    /* 64: navegación inferior del celular */
  --alto-tactil:         2.75rem; /* 44: mínimo tocable */

  /* --------------------------------------------------------------------
     6. Radios (redondeados, como el trazo del logo)
     -------------------------------------------------------------------- */
  --radio-xs:      0.375rem;  /* 6 */
  --radio-sm:      0.5rem;    /* 8 */
  --radio-md:      0.75rem;   /* 12 */
  --radio-lg:      1rem;      /* 16 */
  --radio-xl:      1.375rem;  /* 22 */
  --radio-2xl:     1.75rem;   /* 28 */
  --radio-pildora: 999px;
  --radio-circulo: 50%;

  /* --------------------------------------------------------------------
     7. Sombras (teñidas de petróleo y de tostado, nunca gris puro)
     -------------------------------------------------------------------- */
  --sombra-0: 0 0 0 1px rgba(17, 94, 102, 0.06);
  --sombra-1: 0 1px 2px rgba(33, 30, 27, 0.05), 0 1px 1px rgba(17, 94, 102, 0.04);
  --sombra-2: 0 2px 6px rgba(33, 30, 27, 0.06), 0 8px 20px -8px rgba(17, 94, 102, 0.12);
  --sombra-3: 0 6px 16px rgba(33, 30, 27, 0.08), 0 20px 44px -16px rgba(17, 94, 102, 0.22);
  --sombra-4: 0 12px 32px rgba(33, 30, 27, 0.12), 0 40px 80px -24px rgba(17, 94, 102, 0.30);
  --sombra-interior: inset 0 1px 2px rgba(33, 30, 27, 0.06);
  --sombra-foco: 0 0 0 3px rgba(17, 94, 102, 0.22);
  --sombra-foco-error: 0 0 0 3px rgba(178, 71, 59, 0.22);

  /* --------------------------------------------------------------------
     8. Movimiento
     -------------------------------------------------------------------- */
  --dur-rapida: 120ms;
  --dur-normal: 200ms;
  --dur-lenta:  320ms;
  --curva:        cubic-bezier(0.2, 0.7, 0.3, 1);   /* suave, sin rebote */
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);
  --transicion: color var(--dur-rapida) var(--curva),
                background-color var(--dur-rapida) var(--curva),
                border-color var(--dur-rapida) var(--curva),
                box-shadow var(--dur-rapida) var(--curva),
                opacity var(--dur-normal) var(--curva),
                transform var(--dur-normal) var(--curva);

  /* --------------------------------------------------------------------
     9. Capas
     -------------------------------------------------------------------- */
  --capa-base:        0;
  --capa-pegajoso:    10;
  --capa-barra:       20;
  --capa-desplegable: 30;
  --capa-modal:       40;
  --capa-aviso:       50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-normal: 0ms;
    --dur-lenta:  0ms;
  }
}