/* ==========================================================================
   tulaboratorioweb.cl · Marca "Laboratorio" · Tokens de diseño
   Fuente única de verdad para color, tipografía, espacio y forma.
   Copia este archivo a /css/tokens.css del sitio y ajusta la ruta de fuentes.
   ========================================================================== */

/* ---------- Fuentes autoalojadas (sin Google Fonts: más rápido y sin enviar datos a terceros) ---------- */
@font-face { font-family: "Chivo"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fuentes/chivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Chivo"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../fuentes/chivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fuentes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fuentes/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fuentes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Fuentes de respaldo con las mismas medidas (evitan el salto de diseño al cargar las reales) ---------- */
@font-face { font-family: "Atkinson Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 99.5%; ascent-override: 95.5%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 100.7%; ascent-override: 94.3%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "Chivo Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 101%; ascent-override: 93.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Chivo Fallback"; font-weight: 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 102.2%; ascent-override: 92%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Fallback"; font-weight: 500; src: local("Courier New"), local("Liberation Mono"), local("Menlo");
  size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* ---------- Paleta base (proporción de uso 60 · 25 · 10 · 5) ---------- */
  --cobalto: #2346D8;   /* marca, enlaces, botón principal · 10% */
  --tinta:   #13202A;   /* texto, portada, pie · 25% */
  --niebla:  #F1F4F6;   /* fondos y superficies, junto al blanco · 60% */
  --ambar:   #F2A93B;   /* llamado a la acción y detalles · 5% · NUNCA texto sobre claro (2,0:1) */
  --cielo:   #E4E9FF;   /* chips y etiquetas (Cobalto sobre Cielo 5,92:1) */
  --blanco:  #FFFFFF;

  /* Apoyos (todos verificados con WCAG 2.2) */
  --gris-texto:   #566573; /* texto secundario: 5,99:1 sobre blanco · 5,42:1 sobre Niebla */
  --borde:        #D6DDE3; /* bordes y divisores (decorativo, no texto) */
  --ambar-texto:  #9A5B00; /* cuando se necesita "ámbar" como texto sobre claro: 5,43:1 sobre blanco */
  --ambar-suave:  #FBEED7; /* fondo de avisos (con --ambar-texto: 4,73:1) */
  --cobalto-claro:#AFC0FF; /* enlaces y acentos sobre Tinta: 9,31:1 */
  --gris-oscuro:  #A9B6C2; /* texto secundario sobre Tinta: 8,01:1 */
  --tinta-2:      #1B2B38; /* superficie elevada en modo oscuro */
  --exito:        #0E7453; /* 5,22:1 sobre Niebla */
  --error:        #C0352B; /* 5,0:1 sobre Niebla */
  --exito-claro:  #5CD3A8; /* éxito sobre fondos oscuros (más de 9:1 sobre Tinta) */
  --error-claro:  #FF9C93; /* error sobre fondos oscuros (más de 7:1 sobre Tinta) */
  --cielo-oscuro: #22305E; /* chips y avisos informativos en modo oscuro */

  /* ---------- Roles semánticos (modo claro) ---------- */
  --color-fondo:            var(--niebla);
  --color-superficie:       var(--blanco);
  --color-texto:            var(--tinta);     /* 15,0:1 sobre Niebla */
  --color-texto-suave:      var(--gris-texto);
  --color-marca:            var(--cobalto);
  --color-enlace:           var(--cobalto);   /* 6,47:1 sobre Niebla */
  --color-borde:            var(--borde);
  --color-chip-fondo:       var(--cielo);
  --color-chip-texto:       var(--cobalto);
  --boton-principal-fondo:  var(--cobalto);   /* blanco sobre Cobalto 7,15:1 */
  --boton-principal-texto:  var(--blanco);
  --boton-accion-fondo:     var(--ambar);     /* Tinta sobre Ámbar 8,29:1 (cotizar, WhatsApp, agendar) */
  --boton-accion-texto:     var(--tinta);
  --foco:                   var(--cobalto);

  /* ---------- Tipografía ---------- */
  --fuente-titulos: "Chivo", "Chivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto:   "Atkinson Hyperlegible", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono:    "JetBrains Mono", "JetBrains Fallback", ui-monospace, "Cascadia Code", Consolas, monospace; /* etiquetas, datos, precios */

  /* Escala del manual 64 · 40 · 28 · 20 · 16 · 13 px, fluida entre celular y escritorio */
  --texto-display: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);   /* 40 → 64 */
  --texto-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); /* 28 → 40 */
  --texto-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); /* 20 → 28 */
  --texto-grande:  1.25rem;  /* 20 */
  --texto-base:    1rem;     /* 16 */
  --texto-chico:   0.8125rem;/* 13, solo etiquetas mono */
  --interlineado-titulos: 1.1;
  --interlineado-texto:   1.55;
  --tracking-titulos: -0.02em;
  --tracking-etiquetas: 0.08em;
  --peso-titulo: 900;
  --peso-subtitulo: 700;

  /* ---------- Espacio (base 4 px) ---------- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 24px;
  --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px; --esp-10: 128px;
  --ancho-contenido: 1200px;
  --ancho-lectura: 68ch;
  --margen-lateral: clamp(16px, 4vw, 56px);

  /* ---------- Forma ---------- */
  --radio-chico: 8px;    /* inputs, muestras */
  --radio-medio: 12px;   /* botones */
  --radio-grande: 16px;  /* tarjetas, bento */
  --radio-pildora: 999px;/* chips */
  --borde-ancho: 1px;
  --sombra-1: 0 1px 2px rgb(19 32 42 / .06), 0 2px 8px rgb(19 32 42 / .06);
  --sombra-2: 0 8px 32px rgb(19 32 42 / .12);
  /* Sin degradados ni sombras en el logo (regla del manual). */

  /* ---------- Movimiento ---------- */
  --dur-rapida: 150ms;
  --dur-media: 300ms;
  --dur-lenta: 600ms;
  --curva-salida: cubic-bezier(.16, 1, .3, 1);
  --curva-entrada-salida: cubic-bezier(.65, 0, .35, 1);

  /* ---------- Táctil ---------- */
  --tamano-tactil: 44px;

  color-scheme: light dark;
}

/* ---------- Modo oscuro (por preferencia del sistema o [data-tema="oscuro"]) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo:           var(--tinta);
    --color-superficie:      var(--tinta-2);
    --color-texto:           var(--niebla);       /* 15,0:1 */
    --color-texto-suave:     var(--gris-oscuro);  /* 7,01:1 sobre superficie */
    --color-marca:           var(--cobalto-claro);
    --color-enlace:          var(--cobalto-claro);/* 8,15:1 sobre superficie */
    --color-borde:           #2C3D4B;
    --color-chip-fondo:      var(--cielo-oscuro);
    --color-chip-texto:      var(--cobalto-claro);
    --foco:                  var(--cobalto-claro);
  }
}
:root[data-tema="oscuro"] {
  --color-fondo:           var(--tinta);
  --color-superficie:      var(--tinta-2);
  --color-texto:           var(--niebla);
  --color-texto-suave:     var(--gris-oscuro);
  --color-marca:           var(--cobalto-claro);
  --color-enlace:          var(--cobalto-claro);
  --color-borde:           #2C3D4B;
  --color-chip-fondo:      var(--cielo-oscuro);
  --color-chip-texto:      var(--cobalto-claro);
  --foco:                  var(--cobalto-claro);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
}