/* ==========================================================================
   MOXIFY · TOKENS
   Variables de marca. Si quieres cambiar el color, la tipografía o los
   espaciados de TODA la web, se cambia aquí y en ningún otro sitio.
   ========================================================================== */

:root {

  /* ---------- Paleta base: rojo, negro, blanco ---------- */
  --red-500: #e81010;   /* rojo Moxify (el del logo) */
  --red-600: #c40c0c;
  --red-700: #9c0a0a;
  --red-400: #ff3a3a;
  --red-100: #ffe5e5;

  --ink-1000: #000000;
  --ink-900:  #0a0a0a;  /* fondo de página */
  --ink-800:  #141414;  /* fondo de tarjetas */
  --ink-700:  #1f1f1f;  /* líneas */
  --ink-600:  #2e2e2e;
  --ink-400:  #6b6b6b;
  --ink-300:  #9a9a9a;  /* texto secundario */
  --ink-200:  #c9c9c9;  /* texto de párrafo */
  --ink-100:  #e6e6e6;

  --paper-100: #ffffff;
  --paper-200: #f6f6f6;
  --paper-300: #ececec;

  /* ---------- Semánticos: superficies ---------- */
  --surface-page:    var(--ink-900);
  --surface-card:    var(--ink-800);
  --surface-sunken:  var(--ink-1000);
  --surface-brand:   var(--red-500);
  --surface-invert:  var(--paper-100);
  --surface-overlay: rgba(10, 10, 10, .94);

  /* ---------- Semánticos: texto ---------- */
  --text-body:       var(--paper-100);
  --text-soft:       var(--ink-200);
  --text-muted:      var(--ink-300);
  --text-faint:      var(--ink-400);
  --text-brand:      var(--red-500);
  --text-on-brand:   var(--paper-100);
  --text-invert:     var(--ink-900);

  /* ---------- Semánticos: líneas ---------- */
  --border-hairline: var(--ink-700);
  --border-soft:     var(--ink-600);
  --border-strong:   var(--paper-100);
  --border-brand:    var(--red-500);

  /* ---------- Tipografía ---------- */
  --font-display: "Anton", "Archivo Black", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-marker:  "Permanent Marker", "Comic Sans MS", cursive;
  --font-mono:    "Roboto Mono", ui-monospace, monospace;

  --size-hero:      clamp(52px, 7vw, 112px);
  --size-display-1: clamp(36px, 4.4vw, 72px);
  --size-display-2: clamp(34px, 4vw, 64px);
  --size-display-3: 26px;

  --size-lead:     19px;
  --size-body:     16px;
  --size-body-sm:  15px;
  --size-caption:  13px;
  --size-micro:    11px;
  --size-eyebrow:  13px;

  --lh-display: .88;
  --lh-heading: 1.05;
  --lh-body:    1.55;

  --ls-display: -.01em;
  --ls-eyebrow: .22em;
  --ls-button:  .04em;

  /* ---------- Espaciado y layout ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 56px;  --space-10: 72px; --space-11: 96px; --space-12: 128px;

  --page-max:    1280px;
  --page-gutter: clamp(20px, 4vw, 64px);
  --section-y:   clamp(56px, 7vw, 112px);
  --grid-gap:    24px;

  /* ---------- Controles ---------- */
  --control-h-sm: 36px;  --control-px-sm: 16px;
  --control-h-md: 46px;  --control-px-md: 26px;
  --control-h-lg: 56px;  --control-px-lg: 34px;

  /* ---------- Radios ---------- */
  --radius-sm: 6px;  --radius-md: 12px;  --radius-lg: 18px;
  --radius-xl: 26px; --radius-2xl: 40px; --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---------- Sombras y efectos ---------- */
  --shadow-sticker:      0 10px 28px rgba(0, 0, 0, .45);
  --shadow-sticker-lift: 0 18px 44px rgba(0, 0, 0, .55);
  --shadow-card:         0 4px 16px rgba(0, 0, 0, .35);
  --shadow-glow-red:     0 12px 34px rgba(232, 16, 16, .34);
  --shadow-ring-focus:   0 0 0 3px rgba(232, 16, 16, .45);
  --blur-glass:          saturate(140%) blur(14px);

  /* Inclinaciones tipo sticker */
  --tilt-a: -3deg;
  --tilt-b: 2.5deg;
  --tilt-c: -1.5deg;

  /* ---------- Movimiento ---------- */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-reveal:  700ms;
  --dur-marquee: 30s;

  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --ease-snap:   cubic-bezier(.34, 1.4, .5, 1);

  --transition-control:
    background-color var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);

  --hover-lift:  translateY(-2px);
  --press-scale: scale(.97);

  /* Altura del header, la usa el scroll-padding de los anclajes */
  --header-h: 76px;
}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --hover-lift: none;
    --press-scale: none;
  }
}