/* ==========================================================================
   VANOH Studio — Design tokens
   Fuente: Manual de identidad VANOH 2025 + Portafolio 2025 (PDF). Escala fluida 375px → 1440px.
   ========================================================================== */

/* HK Guise — familia con licencia (Manual de identidad VANOH 2025). */
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-Thin.woff2") format("woff2");       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-Light.woff2") format("woff2");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-Regular.woff2") format("woff2");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-Medium.woff2") format("woff2");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-SemiBold.woff2") format("woff2");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "HK Guise"; src: url("../fonts/HKGuise-Bold.woff2") format("woff2");       font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Color: primitivos ---------- */
  /* Pantone del manual: Black 6 C, Cool Gray 1 C, 7401 C */
  --vn-ink:    #181818;
  --vn-stone:  #DFE0D9;
  --vn-butter: #EFDA9A;
  --vn-paper:  #FFFFFF;
  --vn-mist:   #E1E2DB;  /* gris de las variantes del logotipo */
  --vn-shadow: #262624;  /* logotipo tono sobre tono en fondo negro */
  --vn-fog:    #ECECEC;

  /* ---------- Color: semánticos ---------- */
  --vn-bg:            var(--vn-stone);
  --vn-bg-inverse:    var(--vn-ink);
  --vn-bg-accent:     var(--vn-butter);
  --vn-bg-surface:    var(--vn-paper);
  --vn-text:          var(--vn-ink);
  --vn-text-inverse:  var(--vn-paper);
  --vn-text-muted-inverse: var(--vn-fog);
  --vn-text-decor:    var(--vn-mist);   /* solo decorativo: contraste insuficiente */
  --vn-line:          rgba(24, 24, 24, 0.2);
  --vn-line-strong:   var(--vn-ink);
  --vn-overlay:       rgba(24, 24, 24, 0.35);
  --vn-focus:         var(--vn-ink);

  /* ---------- Tipografía ---------- */
  --vn-font: "HK Guise", "Helvetica Neue", Arial, sans-serif;

  --vn-fw-thin: 100;
  --vn-fw-extralight: 200;
  --vn-fw-light: 300;
  --vn-fw-regular: 400;
  --vn-fw-medium: 500;
  --vn-fw-semibold: 600;
  --vn-fw-bold: 700;

  --vn-fs-display:  clamp(4.5rem, 1.244rem + 13.9vw, 13.75rem); /* 72 → 220 */
  --vn-fs-h1:       clamp(3.5rem, 1.916rem + 6.76vw, 8rem);     /* 56 → 128 */
  --vn-fs-h2:       clamp(2.5rem, 1.62rem + 3.756vw, 5rem);     /* 40 → 80  */
  --vn-fs-h3:       clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem); /* 20 → 24  */
  --vn-fs-lead:     clamp(1.0625rem, 1.04rem + 0.094vw, 1.125rem); /* 17 → 18 */
  --vn-fs-caption:  clamp(0.9375rem, 0.871rem + 0.282vw, 1.125rem); /* 15 → 18 */
  --vn-fs-body:     1rem;                                        /* 16 */
  --vn-fs-overline: clamp(0.8125rem, 0.79rem + 0.094vw, 0.875rem); /* 13 → 14 */
  --vn-fs-contact:  clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);  /* 15 → 16 */

  --vn-lh-display: 0.9;
  --vn-lh-h1: 0.95;
  --vn-lh-h2: 1;
  --vn-lh-h3: 1.28;
  --vn-lh-lead: 1.5;
  --vn-lh-caption: 1.3;
  --vn-lh-body: 1.55;

  --vn-ls-tight: -0.02em;
  --vn-ls-snug: -0.01em;
  --vn-ls-wide: 0.04em;

  --vn-measure: 46ch;

  /* ---------- Espaciado (base 8) ---------- */
  --vn-space-1: 0.5rem;  /* 8   */
  --vn-space-2: 1rem;    /* 16  */
  --vn-space-3: 1.5rem;  /* 24  */
  --vn-space-4: 2rem;    /* 32  */
  --vn-space-6: 3rem;    /* 48  */
  --vn-space-8: 4rem;    /* 64  */
  --vn-space-12: 6rem;   /* 96  */
  --vn-space-20: 10rem;  /* 160 */

  --vn-section-y: clamp(4rem, 2.6rem + 6vw, 10rem);

  /* ---------- Retícula ---------- */
  --vn-cols: 4;
  --vn-margin: 1.25rem;   /* 20 */
  --vn-gutter: 1rem;      /* 16 */

  /* ---------- Forma ---------- */
  --vn-radius: 0;
  --vn-border: 1px solid var(--vn-line);
  --vn-border-strong: 1px solid var(--vn-line-strong);

  /* ---------- Movimiento ---------- */
  --vn-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --vn-dur-fast: 200ms;
  --vn-dur-base: 600ms;
  --vn-dur-slow: 1200ms;

  /* ---------- Capas ---------- */
  --vn-z-base: 0;
  --vn-z-header: 50;
  --vn-z-loader: 100;

  --vn-header-h: 4.5rem;
}

@media (min-width: 768px) {
  :root { --vn-cols: 8;  --vn-margin: 2.5rem; --vn-gutter: 1.25rem; }
}
@media (min-width: 1280px) {
  :root { --vn-cols: 12; --vn-margin: 4rem;   --vn-gutter: 1.5rem; }
}

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