/* ==========================================================================
   tokens.css — Gramax Digital
   Única fuente de verdad: colores, tipografía, espaciados, radios, sombras.
   Tomado del Manual de diseño §1, §3, §4. No hardcodear colores fuera de acá.
   ========================================================================== */

:root {
  /* --- Colores de marca (§1, no se tocan) --- */
  --cyan: #00AFE5;   /* cian institucional, links, estados activos */
  --blue: #0037FF;   /* azul foco puntual */
  --teal: #00DBD5;   /* turquesa detalle */
  --sky: #50DEFF;
  --aqua: #3EFFF5;
  --yellow: #FFDB00; /* amarillo: SOLO acento */
  --ink: #232323;    /* tinta: texto, footer, bloque de impacto */
  --ink-raised: #2C2C2C; /* superficie elevada sobre fondo tinta (pills del loop) */
  --white: #FFFFFF;

  /* --- Superficies (§3). Base clara y lisa, nunca #FFF pleno --- */
  --bg: #F7F9FC;       /* fondo base por defecto */
  --bg-alt: #EEF8FB;   /* fondo alterno (cian lavado) */
  --bg-soft: #F2F4F7;  /* fondo de apoyo */
  --surface: #FAFCFD;  /* superficie de card */

  /* --- Texto --- */
  --ink-soft: #667085; /* texto secundario */
  --ink-on-dark: #F7F9FC;
  --ink-on-dark-soft: #B6BCC6;

  /* --- Estados (§3) --- */
  --success: #12B76A; --success-bg: #E7F8F0;
  --warning: #F79009; --warning-bg: #FEF3E6;
  --error:   #F04438; --error-bg:   #FEEceB;
  --info:    #0BA5EC; --info-bg:    #E6F6FD;

  /* --- Acentos derivados --- */
  --cyan-bg: #E3F5FC;
  --cyan-ink: #007FA8;       /* cian oscurecido, para texto sobre claro (contraste) */
  --yellow-ink: #8A6B00;     /* texto legible sobre amarillo si hiciera falta */
  --line: #E4E9F0;           /* bordes/divisores suaves */
  --line-strong: #D2D9E3;

  /* --- Tipografía (§4): Montserrat en todo --- */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Escala fluida, mobile-first (clamp: min / preferido vw / max) */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-small:   clamp(0.82rem, 0.79rem + 0.2vw, 0.9rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-lead:    clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.9vw, 5rem);
  --fs-display: clamp(3.2rem, 2rem + 6vw, 7rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.12em;

  /* --- Espaciados (escala de 4) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Padding vertical de sección (fluido) */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);
  --gutter: clamp(1.1rem, 0.6rem + 2vw, 2.5rem);
  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* --- Radios --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Sombras (suaves, cálidas) --- */
  --shadow-sm: 0 1px 2px rgba(35, 35, 35, 0.06), 0 1px 3px rgba(35, 35, 35, 0.05);
  --shadow-md: 0 6px 18px rgba(35, 35, 35, 0.08), 0 2px 6px rgba(35, 35, 35, 0.05);
  --shadow-lg: 0 18px 40px rgba(35, 35, 35, 0.12), 0 6px 14px rgba(35, 35, 35, 0.06);
  --shadow-cyan: 0 14px 30px rgba(0, 175, 229, 0.22);

  /* --- Texturas de papel (§5.6) --- */
  --paper-white: url("../../img/fondos/papel-blanco.jpg");
  --paper-celeste: url("../../img/fondos/papel-celeste.jpg");

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* --- Layout fijo --- */
  --nav-h: 68px;
  --tap: 44px; /* objetivo táctil mínimo */
}