/* ═══════════════════════════════════════════════════════════════════════════
   SANTA MEXICANA — TOKENS

   Derivado de Claude Design › Santa Mexicana Design System
   (ec721969-0a24-4748-a1b5-3cde7fc4747a), archivos tokens/*.css.

   Los NOMBRES de token son idénticos a los de allá a propósito: este archivo se
   re-sincroniza de vuelta sin traducir nada, y así el sitio, el deck y los
   carruseles no pueden divergir.

   Dos diferencias con el design system, y solo dos:
     1. La escala de display allá está en px fijos de lámina 1920×1080.
        Aquí es clamp() — misma jerarquía, ancho de viewport variable.
     2. Allá las fuentes vienen de Google Fonts por @import. Aquí van
        self-hosted: el sitio abre sin red de terceros.

   Este archivo SOLO lleva custom properties y @font-face. Ninguna regla de
   layout — esa es la condición para que siga siendo sincronizable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes, subset latino (cubre la ñ de AÑEJO y la ó de DENOMINACIÓN) ──── */

@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/Archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("../assets/fonts/Archivo-800.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;
  src:url("../assets/fonts/Inter-300.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/Inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/Inter-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;
  src:url("../assets/fonts/CormorantGaramond-400i.woff2") format("woff2")}

:root{

  /* ── Grounds ─────────────────────────────── */
  --paper:#FAF8F4;            /* primary ground */
  --cream:#F4F1E8;            /* secondary ground, panels, bands */

  /* ── Ink ─────────────────────────────────── */
  --ink:#14110D;              /* all body and headline text */
  --soft:#231F18;             /* secondary text */
  /* El design system trae #8A8273. Medido sobre --paper da 3.59:1 y NO pasa AA
     en texto normal — y ese token viste el eyebrow y las leyendas legales del
     footer, que son justo las que tienen que poder leerse. Bajado al valor más
     claro que pasa 4.5:1 conservando el tono. Corregir también allá. */
  --muted:#787164;            /* captions, footnotes, labels — 4.56:1 sobre paper */

  /* ── Gold (graphic only — NEVER running text) ──
     No pasa contraste AA sobre claro. Filetes, marcas y rellenos. */
  --gold:#F5A200;
  --gold-d:#D9A62E;           /* the gold of the logo's wing */

  /* ── Hairlines ───────────────────────────── */
  --line:rgba(20,17,13,.14);
  --line-strong:rgba(20,17,13,.28);

  /* ── Section accents — ONE per layout, never two ── */
  --green:#78BC00;
  --blue:#0AA0E6;
  --coral:#F0362A;
  --pink:#EA1C82;

  /* ── Semantic aliases ────────────────────── */
  --surface-page:var(--paper);
  --surface-panel:var(--cream);
  --surface-invert:var(--ink);
  --text-display:var(--ink);
  --text-body:var(--soft);
  --text-quiet:var(--muted);
  --text-on-invert:var(--paper);
  --text-on-invert-quiet:rgba(250,248,244,.62);
  --rule:var(--line);
  --mark:var(--gold);
  --accent:var(--gold);

  /* ── Watermark device ────────────────────── */
  --watermark-opacity:.04;    /* legal range .03–.05 */

  /* ── Families ────────────────────────────── */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --font-accent:"Cormorant Garamond",Georgia,serif;   /* ITALIC only, brand phrases */

  /* ── Weights ─────────────────────────────── */
  --w-display:800;
  --w-subhead:600;
  --w-body-light:300;
  --w-body:400;
  --w-body-medium:500;
  --w-mono:400;
  --w-mono-strong:600;

  /* ── Display scale — clamp() en vez de px de lámina ──
     Misma jerarquía que el design system, adaptada a viewport. */
  --fs-colossal:clamp(64px,13vw,220px);
  --fs-display-1:clamp(52px,9.5vw,160px);
  --fs-display-2:clamp(42px,7vw,120px);
  --fs-display-3:clamp(32px,5.4vw,96px);    /* piso de un titular */
  --fs-head:clamp(26px,3.4vw,64px);
  --fs-subhead:clamp(21px,2.2vw,40px);

  /* ── Reading scale ───────────────────────── */
  --fs-lead:clamp(19px,1.5vw,28px);
  --fs-body:clamp(16px,1.1vw,20px);
  --fs-small:15px;
  --fs-caption:14px;

  /* ── Mono / label scale ──────────────────── */
  --fs-mono:15px;
  --fs-mono-sm:13px;
  --fs-label:12px;            /* las versalitas viven entre 11 y 13px */

  /* ── Tracking ────────────────────────────── */
  --track-colossal:-0.03em;
  --track-display:-0.025em;
  --track-head:-0.02em;
  --track-body:0;
  --track-label:0.18em;
  --track-mono:0.02em;

  /* ── Leading (unidad base de 8px) ────────── */
  --lh-colossal:0.88;
  --lh-display:0.92;
  --lh-head:1.0;
  --lh-body:1.6;
  --lh-mono:1.5;

  /* ── Measure ─────────────────────────────── */
  --measure:65ch;

  /* ── Spacing, unidad base de 8px ─────────── */
  --u:8px;
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:32px;
  --s-5:48px;
  --s-6:64px;
  --s-7:96px;
  --s-8:128px;
  --s-9:192px;

  /* Retícula: en lámina son 12 col con margen de 96 y canal de 32.
     En web el margen respira con el viewport. */
  --cols:12;
  --gutter:32px;
  --margin-outer:clamp(20px,5vw,96px);
  --spec-col-w:300px;

  /* ── Superficies ─────────────────────────── */
  --radius-0:0px;
  --radius-plate:2px;         /* el sistema es cuadrado; el radio solo existe
                                 para placas de foto */
  --border-hair:1px solid var(--line);
  --border-hair-strong:1px solid var(--line-strong);
  --rule-gold:2px solid var(--gold);

  /* Las sombras existen SOLO bajo fotografía de producto compuesta (luz real).
     Nunca sobre texto, nunca sobre paneles, nunca sobre tarjetas. */
  --shadow-product:0 48px 80px rgba(20,17,13,.28),0 12px 24px rgba(20,17,13,.16);
  --shadow-product-tight:0 18px 34px rgba(20,17,13,.22);

  /* ── Motion ──────────────────────────────── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms;
  --dur:260ms;
  --dur-slow:520ms;
}

/* Rendición oscura de los mismos tokens, para invertir una sección puntual:
   <section class="sm-dark"> … </section>  o  data-theme="dark".
   NO es un toggle de tema: la página es hueso. */
.sm-dark,[data-theme="dark"]{
  --paper:#14110D;
  /* Los ALIAS se redefinen aquí obligatoriamente. Un custom property se
     sustituye en el elemento donde se DECLARA: --surface-page:var(--paper)
     se resolvió a #FAF8F4 allá arriba en :root y hereda ya como literal, así
     que cambiar --paper aquí no lo mueve. Sin estas líneas la banda oscura se
     pinta clara. Verificado: --paper daba #14110D y --surface-page #FAF8F4. */
  --surface-page:#14110D;
  --surface-panel:#1C1913;
  --text-display:#FAF8F4;
  --text-body:#E4DFD3;
  --text-quiet:#948B79;
  --rule:rgba(250,248,244,.16);
  --border-hair:1px solid rgba(250,248,244,.16);
  --border-hair-strong:1px solid rgba(250,248,244,.3);
  --cream:#1C1913;
  --ink:#FAF8F4;
  --soft:#E4DFD3;
  --muted:#948B79;
  --line:rgba(250,248,244,.16);
  --line-strong:rgba(250,248,244,.3);
  --surface-invert:#FAF8F4;
  --text-on-invert:#14110D;
  --text-on-invert-quiet:rgba(20,17,13,.6);
  --watermark-opacity:.07;
}