/* Design tokens — Genertika 2026. Fuente: 04_design_tokens.md */
:root{
  /* color — primitivos */
  --color-gold: #e7b200;
  --color-gold-hover: #f5c518;
  --color-gold-muted: rgba(231,178,0,.16);
  --color-black: #0a0a0a;
  --color-charcoal: #1a1f26;
  --color-charcoal-90: #14171c;
  --color-gray: #b6b6b6;
  --color-gray-ink: #5c5c5c;
  --color-white: #ffffff;
  --color-success: #2e7d32;
  --color-danger: #c62828;

  /* tipografia */
  --font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text-h1: 60px;
  --text-h1-tablet: 40px;
  --text-h1-mobile: 30px;
  --text-h2: 40px;
  --text-h2-tablet: 30px;
  --text-h2-mobile: 25px;
  --text-h3: 30px;
  --text-h3-tablet: 25px;
  --text-h3-mobile: 20px;
  --text-body: 22px;
  --text-body-tablet: 20px;
  --text-nav: 20px;
  --text-eyebrow: 16px;
  --text-caption: 14px;
  --text-cta: 18px;
  --letter-spacing-eyebrow: .08em;
  --line-height-heading: 1.05;
  --line-height-body: 1.5;

  /* espaciado — escala de 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* breakpoints (referencia, se usan en media queries) */
  --bp-md: 767.98px;
  --bp-lg: 991.98px;
  --container-max: 1200px;

  /* radios y sombra */
  --radius-none: 0px;
  --shadow-card: 0 4px 12px rgba(0,0,0,.25);

  /* motion */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
}