/* tokens.css — Óptica Croma
   Fuente de verdad del diseño: docs/DESIGN.md (rediseño de octubre de 2026). Si cambia un valor, recalcular
   contrastes con tools/contraste.py.
   Destino en el proyecto: public/assets/css/tokens.css */

/* Tipografía: Onest variable (SIL OFL), servida desde el propio dominio.
   Archivo: public/assets/fonts/onest-latin-wght-normal.woff2 (subconjunto latino, cubre acentos y ñ) */
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin-wght-normal.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Neutros (interfaz acromática) ---- */
  --color-canvas: #F5F6F7;        /* fondo de página y de las secciones en gris suave */
  --color-surface: #FFFFFF;       /* tarjetas y campos */
  --color-sunken: #E6E7E9;        /* fondos hundidos, hover suave */
  --color-line: #E2E3E5;          /* líneas decorativas (no para campos) */
  --color-field-border: #7A7777;  /* borde de campos: 3,96:1 sobre lienzo, 4,44:1 sobre blanco */
  --color-ink: #171717;           /* negro de la marca: texto principal y fondos oscuros */
  --color-ink-2: #4B4848;         /* texto secundario */
  --color-ink-3: #5F5C5C;         /* captions y ayudas (mín. 14 px) */
  --color-on-dark: #FFFFFF;
  --color-on-dark-2: #C4C2C2;
  --color-ground-dark: #171717;   /* fondo de las secciones negras (hero, laboratorio, pie) */
  --color-ground-dark-2: #222222; /* tarjetas sobre el negro */
  --color-line-on-dark: rgba(255, 255, 255, 0.12);

  /* ---- Acción, foco, enlaces, errores ---- */
  --color-action: #171717;
  --color-action-hover: #303235;
  --color-action-text: #FFFFFF;
  --color-link: #324F9F;
  --color-focus: #324F9F;
  --color-focus-on-dark: #00ABDD;
  --color-error: #CC3B4C;         /* bordes e íconos; NO para texto sobre el lienzo (4,36:1) */
  --color-error-text: #BA3245;    /* texto de error: 5,16:1 sobre lienzo, 5,79:1 sobre blanco */

  /* ---- Acentos de identidad (círculo del logo): detalles, íconos, líneas; nunca colores dominantes ---- */
  --brand-whatsapp: #25D366;      /* botón de WhatsApp de la portada: siempre con texto negro (9,04:1), nunca blanco */
  --brand-whatsapp-hover: #1FB958; /* texto negro 6,95:1 */
  --croma-yellow: #F5D51F;        /* texto amarillo SOLO sobre fondo oscuro (12:1 sobre #171717) */
  --croma-blue: #159BD3;
  --croma-green: #72B84B;
  --croma-red: #E53935;
  --croma-purple: #7650A4;

  /* ---- Espectro del logo (RGB de pantalla, del PNG original) ---- */
  --spectrum-amarillo: #F7E840;
  --spectrum-amarillo-verdoso: #DBDE43;
  --spectrum-verde: #85BD4E;
  --spectrum-celeste: #00ABDD;
  --spectrum-azul: #324F9F;
  --spectrum-indigo: #444197;
  --spectrum-violeta: #7B4498;
  --spectrum-carmin: #CC3B4C;
  --spectrum-rojo: #EE373A;
  --spectrum-rojo-anaranjado: #EF4E39;
  --spectrum-naranja: #F4983A;
  --spectrum-ambar: #F7BA36;
  --spectrum-bar: linear-gradient(90deg,
    var(--spectrum-amarillo), var(--spectrum-amarillo-verdoso), var(--spectrum-verde),
    var(--spectrum-celeste), var(--spectrum-azul), var(--spectrum-indigo),
    var(--spectrum-violeta), var(--spectrum-carmin), var(--spectrum-rojo),
    var(--spectrum-rojo-anaranjado), var(--spectrum-naranja), var(--spectrum-ambar));

  /* ---- Estados de los pedidos (siempre con texto e ícono) ---- */
  --status-proceso-bg: #F7BA36;    --status-proceso-fg: #201E1E;    /* 9,50:1 */
  --status-listo-bg: #85BD4E;      --status-listo-fg: #201E1E;      /* 7,41:1 */
  --status-entregado-bg: #324F9F;  --status-entregado-fg: #FFFFFF;  /* 7,62:1 */
  --status-eliminado-bg: #E6E7E9;  --status-eliminado-fg: #4B4848;  /* 7,32:1 */

  /* ---- Tipografía ---- */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-caption: 0.875rem;  /* 14 px: mínimo absoluto */
  --text-small: 1rem;        /* 16 px */
  --text-body: 1.125rem;     /* 18 px */
  --text-lead: 1.25rem;      /* 20 px */
  --text-h3: 1.375rem;       /* 22 px */
  --text-h2: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);   /* 30 a 44 px */
  --text-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-display: clamp(2.625rem, 1.5rem + 4.6vw, 4.5rem); /* 42 a 72 px (hero) */

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-caption: 1.45;
  --lh-small: 1.5;
  --lh-body: 1.6;

  --tracking-display: -0.03em;   /* solo desde 28 px hacia arriba */
  --tracking-heading: -0.02em;
  --tracking-normal: 0;

  /* ---- Espaciado (base 4 px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-gap: clamp(2.0625rem, 0.75rem + 2.25vw, 2.8125rem); /* 33 px en celular y tablet, 45 px en escritorio (antes 44 y 60; al inicio 44 y 80) */
  --container: 80rem;            /* 1280 px */
  --gutter: clamp(1.25rem, 4vw, 4rem);                  /* 20 a 64 px */
  --tap-min: 3rem;               /* 48 px: alto mínimo de botones y campos */

  /* ---- Formas ---- */
  --radius-sm: 0.5rem;
  --radius-field: 0.875rem;
  --radius-card: 1.125rem;       /* 18 px: todas las tarjetas comparten el mismo lenguaje */
  --radius-panel: 1.125rem;
  --radius-pill: 999px;

  /* ---- Elevación ---- */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
  --border-card: 1px solid rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 8px 30px rgba(32, 30, 30, 0.12);

  /* ---- Movimiento ---- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Medidas de componentes (DESIGN.md secciones 4 y 6; sin colores nuevos) ---- */
  --border-field: 1.5px;
  --icon-stroke: 1.75;           /* trazo de los íconos */
  --focus-ring: 3px;
  --focus-offset: 3px;
  --field-height: 3.25rem;       /* 52 px */
  --chip-height: 2rem;           /* 32 px */
  --icon-sm: 1rem;               /* 16 px */
  --icon-md: 1.5rem;             /* 24 px */
  --spectrum-height: 4px;
  --logo-h: 2rem;                /* 32 px de alto en celular */
  --logo-h-md: 2.5rem;           /* 40 px desde 768 px */
  --btn-pad-x: 1.75rem;          /* 28 px */
  --header-min-h: 4rem;          /* 64 px */
  --header-logo-h: 2.5rem;       /* logo del encabezado: 40 px en celular */
  --header-logo-h-md: 3.75rem;   /* y 60 px desde 768 px (el pie sigue con --logo-h-md) */
  --header-min-h-md: 5.5rem;     /* 88 px de encabezado desde 768 px */
  --measure: 65ch;
  --card-access-max: 30rem;      /* ancho máximo de la tarjeta de acceso */
}

/* Puntos de corte (no se pueden usar variables en media queries):
   48rem (768 px), 64rem (1024 px), 90rem (1440 px). Base: 375 px, mobile-first. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}