/* ============================================================
   TOKENS DE DISEÑO
   Variables CSS globales: colores, tipografía, espaciado, layout
   ============================================================ */

/* --- Carga de tipografía Author (self-hosted) --- */
@font-face {
  font-family: "Author";
  src: url("../assets/fonts/Author-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../assets/fonts/Author-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../assets/fonts/Author-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../assets/fonts/Author-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Paleta --- */
  --color-white: #ffffff;
  --color-bone:  #efefea;
  --color-mint:  #d5fad3;
  --color-rust:  #e06342;
  --color-ink:   #212121;

  /* --- Tipografía --- */
  --font-family: "Author", system-ui, -apple-system, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Escala tipográfica con clamp(min, vw, max)
     Calculada para escalar entre mobile (~360px) y desktop (1920px) */
  --font-h1:          clamp(2.5rem, 3.75vw, 4.5rem);     /* 40 -> 72 px */
  --font-h2:          clamp(2rem, 3vw, 3.5rem);          /* 32 -> 56 px */
  --font-h3:          clamp(1.5rem, 2.25vw, 2.5rem);     /* 24 -> 40 px */
  --font-lead:        clamp(1.25rem, 2.5vw, 3rem);       /* 20 -> 48 px */
  --font-body:        clamp(1rem, 1.125vw, 1.25rem);     /* 16 -> 20 px */
  --font-small:       clamp(0.875rem, 1vw, 1rem);        /* 14 -> 16 px */

  --font-stat-number: clamp(2rem, 3.125vw, 3.75rem);     /* 32 -> 60 px */
  --font-stat-label:  clamp(1rem, 1.25vw, 1.5rem);       /* 16 -> 24 px */

  --font-button:      clamp(1rem, 1.25vw, 1.5rem);       /* 16 -> 24 px */

  /* --- Layout / Grilla --- */
  --grid-cols: 10;
  --grid-rows: 10;
  --grid-gap: 15px;
  --grid-max-width: 1920px;

  /* --- Espaciado base --- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* --- Otros --- */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-md: 8px;

  --transition-base: 0.3s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-wipe: 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  --z-header: 100;
  --z-overlay: 200;
}