/* ==========================================================================
   TOKENS — variables de diseño globales
   ========================================================================== */
:root {
  /* Color */
  --color-black: #0a0a0a;
  --color-charcoal: #1f1f1f;
  --color-gray: #6b6b6b;
  --color-gray-light: #e8e8e8;
  --color-white: #ffffff;
  --color-red: #c41e3a;
  --color-red-dark: #9e1830;

  /* Tipografía */
  --font-display: 'Archivo Black', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(28px, 4.5vw, 52px);
  --fs-h2: clamp(22px, 2.8vw, 34px);
  --fs-h3: 24px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-label: 12px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --header-height: 72px;

  /* Bordes y radios */
  --border-thin: 1px solid var(--color-gray-light);
  --radius: 4px;

  /* Transiciones */
  --transition: 200ms ease;

  /* Espaciado de secciones */
  --section-padding-y: clamp(32px, 5vw, 64px);
  --fs-display: clamp(44px, 8vw, 100px);
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 5%;
  }
}