/* ==========================================================================
   tokens.css — Vigamex de Peñasco · identidad "Lámina técnica"
   Paleta generada en OKLCH (ver design-brief.md):
   · Marca  h 266  — azul del logotipo y de la fachada de la Bloquera
   · Acento h 92   — amarillo del logotipo (solo CTAs y marcadores)
   · Neutros h 85  — "concreto": grises cálidos con 0.6–1.2 % de croma
   Contraste verificado con scripts/contrast.mjs de la skill.
   ========================================================================== */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/big-shoulders-display-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

:root {
  /* ---------- Neutros "concreto" ---------- */
  --bg:            #F8F5F1;  /* oklch(.972 .006 85) */
  --surface:       #FEFDFA;  /* oklch(.993 .003 85) */
  --muted:         #F0EDE8;  /* secciones alternas */
  --muted-2:       #E7E4DD;  /* pistas de controles, fondo de media */
  --border:        #E0DED8;
  --border-strong: #CAC7C0;
  --border-input:  #838078;  /* 3.9:1 sobre surface (1.4.11) */

  --ink:   #0E1526;          /* tinta de plano (azul casi negro) 17:1 */
  --ink-2: #343C4C;          /* lectura 10.6:1 */
  --ink-3: #585E69;          /* secundario 6.0:1 sobre muted */
  --ink-4: #9B9EA6;          /* decorativo / disabled */

  /* ---------- Marca: azul Vigamex (h 266) ---------- */
  --brand-25:  #F7FAFF;
  --brand-50:  #EDF4FF;
  --brand-100: #DAE6FF;
  --brand-200: #BAD1FF;
  --brand-300: #8FAFFB;      /* texto de marca sobre azul profundo */
  --brand-400: #6187E7;
  --brand-500: #365DD2;
  --brand-600: #2546B1;
  --brand-700: #1B3793;      /* color de marca en claro */
  --brand-800: #132A74;
  --brand-900: #0C1D52;      /* banda azul (hero, cotizador) */
  --brand-950: #061033;      /* pie */
  --brand: var(--brand-700);
  --on-brand: #FFFFFF;
  --brand-hover:       var(--brand-800);
  --brand-soft:        var(--brand-50);
  --brand-soft-border: var(--brand-100);
  --brand-text:        var(--brand-700);

  /* ---------- Acento: amarillo Vigamex (≤ 5 % de superficie) ---------- */
  --accent:       #F9CC21;
  --accent-hover: #EDB904;
  --accent-soft:  #FCF2CD;
  --on-accent:    #061033;

  /* Rojo "DE PEÑASCO": solo dentro del logotipo */
  --logo-red: #D7262E;

  /* ---------- Semánticos ---------- */
  --ok: #18874A;   --ok-50: #EAF7EF;   --ok-700: #136B3A;
  --warn: #C27803; --warn-50: #FFF8E6;
  --danger: #C8323A; --danger-50: #FDF0F0; --danger-700: #A3242B;
  --wa: #1FA855;   /* solo para el glifo de WhatsApp */

  /* ---------- Superficie inversa (azul Vigamex) ---------- */
  --inverse:        #0C1D52;
  --inverse-2:      #132A74;
  --inverse-3:      #1B3793;
  --inverse-border: rgba(255,255,255,.14);
  --on-inverse:     #FFFFFF;
  --on-inverse-2:   rgba(255,255,255,.74);

  /* ---------- Tipografía ---------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --display-weight:   800;
  --display-tracking: -0.012em;
  --display-leading:  .9;
  --display-settings: normal;
  --display-style:    normal;

  --fs-hero:  clamp(56px, 8.2vw, 128px);
  --fs-h2:    clamp(42px, 5.6vw, 86px);
  --fs-h3:    clamp(26px, 2.3vw, 34px);
  --fs-lead:  clamp(16.5px, 1.35vw, 19px);
  --fs-body:  16px;
  --fs-small: 14.5px;
  --fs-meta:  12px;

  /* ---------- Forma: precisión, sin píldoras ---------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r:    4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-2xl: 12px;
  --r-pill: 999px;

  /* ---------- Elevación (tinta azul, nunca negro) ---------- */
  --shadow-rgb: 14,21,38;
  --sh-xs: 0 1px 2px rgba(var(--shadow-rgb),.05);
  --sh-sm: 0 1px 3px rgba(var(--shadow-rgb),.08), 0 1px 2px -1px rgba(var(--shadow-rgb),.06);
  --sh-md: 0 4px 12px -2px rgba(var(--shadow-rgb),.08), 0 2px 4px -2px rgba(var(--shadow-rgb),.05);
  --sh-lg: 0 10px 15px -3px rgba(var(--shadow-rgb),.10), 0 4px 6px -4px rgba(var(--shadow-rgb),.08);
  --sh-xl: 0 24px 48px -12px rgba(var(--shadow-rgb),.26);
  --sh-btn: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.10), 0 1px 2px rgba(var(--shadow-rgb),.08);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  /* ---------- Movimiento ---------- */
  --ease:        cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: .15s;   /* feedback inmediato */
  --dur-2: .25s;   /* microinteracciones */
  --dur-3: .36s;   /* capas y transiciones estructurales */
  --dur-4: .7s;    /* aparición de contenido */

  /* ---------- Layout ---------- */
  --header-h: 72px;
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(76px, 9.5vw, 136px);
  --head-gap: clamp(36px, 5vw, 64px);
  --grid-gap: 20px;
}