/* ==========================================================================
   TOKENS DE DISEÑO — Química Tek
   Valores tomados del archivo de Figma (QUIMICA-TEK). Para cambiar un color,
   una tipografía o un tamaño en TODO el sitio, edita solo este archivo.
   ========================================================================== */

:root {
  /* Colores */
  --color-navy: #1b4576;
  --color-navy-dark: #143255;
  --color-orange: #ff6400;
  --color-orange-dark: #b54903;
  --color-sky: #e3f2fd;
  --color-card: #e5e5e5;
  --color-surface: #fbfbfb;
  --color-product-bg: #faf9fa;
  --color-panel: #e6e6e6;
  --color-ink: #0c0c0c;
  --color-ink-strong: #050505;
  --color-heading-alt: #2a2a2a;
  --color-label: #3e3e3e;
  --color-muted: #777777;
  --color-placeholder: #787878;
  --color-neutral: #999999;
  --color-neutral-dark: #676767;
  --color-white: #ffffff;
  --color-thermotek: #0e854c;
  --color-impac: #004e96;
  --color-osel: #133b83;

  /* Tipografías (Gill Sans MT viene con Office en Windows y macOS;
     si quieres que se vea igual en todos los equipos, ver README.md) */
  --font-body: "Gill Sans MT", "Gill Sans", "Gill Sans Nova", Calibri, "Trebuchet MS", sans-serif;
  --font-accent: "Lemon Milk", "Gill Sans MT", "Gill Sans", Calibri, sans-serif;

  /* Tamaños de texto (se reducen solos en tablet y móvil) */
  --fs-display: clamp(32px, 5vw, 64px);
  --fs-h1: clamp(30px, 3.4vw, 48px);
  --fs-h2: clamp(22px, 2.3vw, 32px);
  --fs-h3: 24px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;

  /* Radios */
  --radius-pill: 100px;
  --radius-card: 18px;
  --radius-banner: 22px;
  --radius-brand: 19px;
  --radius-media: 11px;
  --radius-panel: 13px;

  /* Layout */
  --container: 1280px;
  --gutter: 80px;
  --section-gap: 96px;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 40px;
    --section-gap: 72px;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --section-gap: 56px;
  }
}