/* =========================================================
   VARIABLES.CSS
   Tokens de diseño de Asgard Nutrición Deportiva.
   Paleta simplificada: negro casi puro + blanco casi puro,
   con un único color de acento (oro) para enlaces y detalles.
   Cambia aquí para afectar a todo el sitio.
   ========================================================= */

:root {
  /* --- Color: superficies --- */
  --color-bg: #0b0b0a;            /* fondo general, negro casi puro */
  --color-bg-alt: #121211;        /* franjas / secciones alternas */
  --color-surface: #161615;       /* tarjetas, cabeceras de tarjeta */
  --color-surface-raised: #1c1c1a;/* elementos elevados, hover */
  --color-border: #2c2c29;        /* líneas y bordes sutiles */
  --color-border-strong: #40403b; /* bordes con más presencia */

  /* --- Color: superficie clara (solo para logos de marcas oscuros) --- */
  --color-surface-light: #f3efe6;
  --color-text-on-light: #1c1a16;

  /* --- Color: acento (solo barra de navegación) --- */
  --color-gold: #c9a24b;          /* oro envejecido, únicamente para la cabecera/nav */
  --color-gold-bright: #e3c273;   /* oro para el enlace activo del menú */

  /* --- Color: texto --- */
  --color-text: #f7f5ef;          /* texto principal, blanco casi puro */
  --color-text-muted: #b9b6ac;    /* texto secundario */
  --color-text-faint: #7d7a71;    /* texto terciario, metadatos */
  --color-text-on-gold: #17140e;  /* texto sobre fondos dorados */

  /* --- Tipografía --- */
  --font-display: "Caudex", "Georgia", serif;
  --font-body: "Caudex", "Georgia", serif;

  --fs-hero: clamp(2.4rem, 6vw, 4.4rem);
  --fs-h1: clamp(2rem, 4.4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: 1.06rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.85rem;

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.75;

  /* --- Espaciado --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* --- Layout --- */
  --content-width: 1120px;
  --content-width-narrow: 740px;
  --radius-sm: 3px;
  --radius-md: 6px;

  /* --- Sombra --- */
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* --- Transición --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
}