/* ============================================
   NUTRICIÓN DEPORTIVA — DESIGN TOKENS
   Editorial flat / no rounded corners / no shadows
   ============================================ */

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Primary signal — high voltage acid yellow. CTAs, key accents. */
  --color-volt:           #D4FF00;
  /* Alarm / energy red. Sparing, used for accent text, badges, "PR/limit" callouts. */
  --color-red:            #FF2A2A;
  /* Hero black — page background on dark sections, primary text on light. */
  --color-ink:            #1A1A1A;
  /* Carbon — secondary surfaces on dark mode (cards over ink), borders on light mode. */
  --color-carbon:         #333333;
  /* Paper — light surface, body text on dark mode. */
  --color-paper:          #FFFFFF;

  /* ---------- DERIVED / OPACITY TOKENS ---------- */
  --color-ink-80:         rgba(26, 26, 26, 0.80);
  --color-ink-60:         rgba(26, 26, 26, 0.60);
  --color-ink-40:         rgba(26, 26, 26, 0.40);
  --color-ink-10:         rgba(26, 26, 26, 0.10);
  --color-ink-05:         rgba(26, 26, 26, 0.05);

  --color-paper-80:       rgba(255, 255, 255, 0.80);
  --color-paper-60:       rgba(255, 255, 255, 0.60);
  --color-paper-40:       rgba(255, 255, 255, 0.40);
  --color-paper-20:       rgba(255, 255, 255, 0.20);
  --color-paper-10:       rgba(255, 255, 255, 0.10);
  --color-paper-05:       rgba(255, 255, 255, 0.05);

  /* ---------- SEMANTIC ---------- */
  /* Light surface (default) */
  --bg:                   var(--color-paper);
  --bg-alt:               #F5F5F5;          /* faint off-white for section alternation */
  --fg:                   var(--color-ink);
  --fg-muted:             var(--color-ink-60);
  --fg-faint:             var(--color-ink-40);
  --border:               var(--color-ink-10);
  --border-strong:        var(--color-ink);

  /* Dark surface (inverted blocks, hero CTA cards, footer) */
  --bg-dark:              var(--color-ink);
  --bg-dark-alt:          var(--color-carbon);
  --fg-on-dark:           var(--color-paper);
  --fg-on-dark-muted:     var(--color-paper-60);
  --border-on-dark:       var(--color-paper-10);

  /* Accents */
  --accent:               var(--color-volt);     /* primary CTA fill */
  --accent-on:            var(--color-ink);      /* text/icon on volt */
  --signal:               var(--color-red);      /* secondary accent — italics, alarms */

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:         'Outfit', system-ui, sans-serif;
  --font-body:            'Inter', system-ui, sans-serif;

  /* Type scale — fluid clamps for display, fixed for UI */
  --type-mega:            clamp(4rem, 14vw, 11rem);    /* hero H1 */
  --type-h1:              clamp(3rem, 9vw, 7.5rem);    /* section h2 */
  --type-h2:              clamp(2.25rem, 5vw, 4.5rem);
  --type-h3:              clamp(1.5rem, 2.5vw, 2.25rem);
  --type-h4:              1.5rem;                       /* 24 */
  --type-h5:              1.25rem;                      /* 20 */
  --type-body-lg:         1.125rem;                     /* 18 */
  --type-body:            1rem;                         /* 16 */
  --type-body-sm:         0.875rem;                     /* 14 */
  --type-caption:         0.75rem;                      /* 12 */
  --type-micro:           0.6875rem;                    /* 11 — badges */
  --type-micro-xs:        0.625rem;                     /* 10 — labels, copyright */

  /* Tracking */
  --track-tighter:        -0.03em;
  --track-tight:          -0.015em;
  --track-normal:         0;
  --track-wide:           0.05em;
  --track-widest:         0.2em;
  --track-mega:           0.3em;     /* badges, micro labels */
  --track-mega-plus:      0.4em;     /* hero pill labels */

  /* Line heights */
  --leading-mega:         0.85;     /* display titles */
  --leading-tight:        1.0;
  --leading-snug:         1.2;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* ---------- SPACING (8pt grid w/ 4 sub-step) ---------- */
  --space-1:              0.25rem;   /* 4  */
  --space-2:              0.5rem;    /* 8  */
  --space-3:              0.75rem;   /* 12 */
  --space-4:              1rem;      /* 16 */
  --space-5:              1.5rem;    /* 24 */
  --space-6:              2rem;      /* 32 */
  --space-7:              3rem;      /* 48 */
  --space-8:              4rem;      /* 64 */
  --space-9:              6rem;      /* 96 */
  --space-10:             8rem;      /* 128 */

  /* ---------- BORDERS (always 0 radius — editorial flat) ---------- */
  --radius:               0;
  --border-w:             1px;
  --border-w-2:           2px;
  --border-w-accent:      4px;       /* default accent stripe */
  --border-w-accent-lg:   8px;       /* dramatic accent stripe (CTA cards) */

  /* ---------- LAYOUT ---------- */
  --container-max:        80rem;     /* 1280 */
  --container-pad:        1.5rem;
  --header-h:             4rem;
  --banner-h:             1.75rem;
}

/* ============================================
   BASE
   ============================================ */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--space-9); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

img { display: block; max-width: 100%; }

::selection { background: var(--color-volt); color: var(--color-ink); }

/* ============================================
   TYPOGRAPHY — semantic classes
   ============================================ */
h1, h2, h3, h4, h5, h6,
.t-mega, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-mega);
  margin: 0;
}

.t-mega {
  font-size: var(--type-mega);
  line-height: 0.82;
}
.t-h1, h1 {
  font-size: var(--type-h1);
}
.t-h2, h2 {
  font-size: var(--type-h2);
  line-height: 0.9;
}
.t-h3, h3 {
  font-size: var(--type-h3);
  line-height: 1.0;
  letter-spacing: var(--track-tighter);
}
.t-h4, h4 {
  font-size: var(--type-h4);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}
.t-h5, h5 {
  font-size: var(--type-h5);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}

/* Body */
.t-body-lg { font-size: var(--type-body-lg); line-height: var(--leading-relaxed); font-weight: 500; }
.t-body    { font-size: var(--type-body);    line-height: var(--leading-relaxed); font-weight: 500; }
.t-body-sm { font-size: var(--type-body-sm); line-height: var(--leading-normal);  font-weight: 500; }

/* Editorial micro labels — the brand's signature */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-mega);
  line-height: 1;
}
.t-micro {
  font-family: var(--font-body);
  font-size: var(--type-micro-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  line-height: 1;
}

/* Italic accent — used on signal-color emphasis words */
.t-italic { font-style: italic; }

/* Inline accent colors */
.fg-volt   { color: var(--color-volt); }
.fg-red    { color: var(--color-red); }
.fg-paper  { color: var(--color-paper); }
.fg-ink    { color: var(--color-ink); }
.fg-muted  { color: var(--fg-muted); }

.bg-volt   { background: var(--color-volt); color: var(--color-ink); }
.bg-red    { background: var(--color-red); color: var(--color-paper); }
.bg-ink    { background: var(--color-ink); color: var(--color-paper); }
.bg-carbon { background: var(--color-carbon); color: var(--color-paper); }
.bg-paper  { background: var(--color-paper); color: var(--color-ink); }