/*
 * variables.css — Design tokens de Las Moiras
 * Incluir en TODAS las páginas antes de cualquier otro CSS
 */

/* ── Fuentes locales ─────────────────────────────────── */
@font-face {
  font-family: 'Retrodict';
  src: url('../assets/fonts/retrodict.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colores ─────────────────────────────────────────── */
  --color-bg:           #f5f2f0;
  --color-bg-white:     #ffffff;
  --color-bg-cream:     #f1e8dc;
  --color-bg-muted:     #ebe4df;

  --color-purple:        #5d3e95;
  --color-purple-dark:   #41376b;
  --color-purple-medium: #8659d8;
  --color-purple-light:  #f8f5ff;

  --color-orange:       #e65e36;

  --color-black:        #050708;
  --color-dark:         #202327;
  --color-dark-800:     #33383d;
  --color-dark-400:     #878380;

  --color-success:      #0db480;
  --color-success-bg:   #f6fefb;

  --color-white:        #ffffff;

  /* ── Tipografía ──────────────────────────────────────── */
  /* Retrodict: serif display (headings) — fuente comercial, añadir @font-face */
  /* PP Telegraf UltraBold: bold CTAs — fuente comercial, añadir @font-face    */
  /* Ubuntu: disponible en Google Fonts                                         */

  --font-display:       'Retrodict', Georgia, 'Times New Roman', serif;
  --font-body:          'Ubuntu', system-ui, sans-serif;
  --font-bold:          'PP Telegraf', 'Ubuntu', system-ui, sans-serif;

  /* Tamaños de fuente */
  --fs-display-xl:  55px;
  --fs-display-lg:  56px;
  --fs-display-md:  48px;
  --fs-h3:          40px;
  --fs-h4:          32px;
  --fs-h5:          24px;
  --fs-body-xl:     18px;
  --fs-body-lg:     16px;
  --fs-body-md:     15px;
  --fs-body-sm:     14px;

  /* Interlineado */
  --lh-display:     1.1;
  --lh-h2:          48px;
  --lh-h5:          34px;
  --lh-body-xl:     28px;
  --lh-body-lg:     24px;
  --lh-body-md:     20px;

  /* ── Espaciado ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Radios ──────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 100px;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:        1920px;
  --content-width:    1594px;         /* margen interno 163px cada lado */
  --content-padding:  163px;
  --nav-height:       176px;
  --footer-height:    683px;

  /* ── Transiciones ────────────────────────────────────── */
  --transition-base: 200ms ease;
  --transition-menu: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Breakpoints (referencia, usar en media queries) ────
   Desktop  ≥ 1280px
   Tablet   768px – 1279px
   Mobile   < 768px
   ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --nav-height: 72px;
  }
}