/* Fitogenix — brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Color */
  --fx-forest: #0E2419;   /* primary dark background */
  --fx-deer:   #1D5B43;   /* logo green — accents on light bg, emphasis text */
  --fx-leaf:   #5DC35A;   /* logo leaf — accents on dark bg, rules, highlights */
  --fx-bone:   #F2EFE6;   /* primary light background + text on dark */
  --fx-alert:  #C0392B;   /* warnings, "rejected", misleading claims only */
  --fx-muted:  #7F9488;   /* struck-through / secondary text on dark */
  --fx-line-dark: #3A5446;/* hairline dividers on dark */

  /* Type */
  --fx-display: 'Barlow Condensed', sans-serif;  /* headlines, UPPERCASE, 700–800 */
  --fx-accent:  'Instrument Serif', serif;       /* italic, the one word that matters */
  --fx-mono:    'JetBrains Mono', monospace;     /* labels, data, ingredients */

  /* Headline scale (web, fluid) */
  --fx-h1: clamp(56px, 8vw, 128px);
  --fx-h2: clamp(40px, 5.5vw, 96px);
  --fx-h3: clamp(28px, 3.2vw, 56px);
  --fx-body: 18px;
  --fx-label: 14px;

  --fx-lh-tight: 0.92;
  --fx-track-label: 0.14em;

  /* Space */
  --fx-pad: clamp(24px, 6vw, 80px);
  --fx-gap-s: 16px;
  --fx-gap-m: 32px;
  --fx-gap-l: 64px;

  /* Shape — square and editorial; round only for seals, pills and device frames */
  --fx-radius: 0;
  --fx-rule: 2px;
}

body { margin: 0; background: var(--fx-bone); color: var(--fx-forest); font-family: var(--fx-mono); font-size: var(--fx-body); line-height: 1.5; }
a { color: var(--fx-deer); } a:hover { color: var(--fx-forest); }
.fx-dark { background: var(--fx-forest); color: var(--fx-bone); }
.fx-dark a { color: var(--fx-leaf); } .fx-dark a:hover { color: var(--fx-bone); }

.fx-h1, .fx-h2, .fx-h3 { font-family: var(--fx-display); font-weight: 800; text-transform: uppercase; line-height: var(--fx-lh-tight); margin: 0; text-wrap: balance; }
.fx-h1 { font-size: var(--fx-h1); } .fx-h2 { font-size: var(--fx-h2); } .fx-h3 { font-size: var(--fx-h3); font-weight: 700; }

/* Serif-italic accent inside a headline: set ~10% larger than the headline */
.fx-em { font-family: var(--fx-accent); font-style: italic; font-weight: 400; text-transform: none; font-size: 1.1em; color: var(--fx-deer); }
.fx-dark .fx-em { color: var(--fx-leaf); }
.fx-em--alert { color: var(--fx-alert); }

.fx-label { font-family: var(--fx-mono); font-size: var(--fx-label); font-weight: 500; letter-spacing: var(--fx-track-label); text-transform: uppercase; color: var(--fx-deer); }
.fx-dark .fx-label { color: var(--fx-leaf); }

.fx-rule { width: 80px; height: 4px; background: var(--fx-leaf); border: 0; margin: 0; }
.fx-list > * { border-bottom: var(--fx-rule) solid currentColor; padding: 20px 0; }
.fx-list { border-top: var(--fx-rule) solid currentColor; }

.fx-tag-alert { display: inline-block; background: var(--fx-alert); color: var(--fx-bone); font-family: var(--fx-display); font-weight: 800; text-transform: uppercase; padding: 0.25em 0.4em 0.18em; }

.fx-label-card { background: var(--fx-bone); color: var(--fx-forest); padding: 32px 36px; font-family: var(--fx-mono); }
.fx-label-card > :first-child { display: block; font-weight: 700; letter-spacing: var(--fx-track-label); border-bottom: var(--fx-rule) solid var(--fx-forest); padding-bottom: 12px; margin-bottom: 14px; }

.fx-btn { display: inline-flex; align-items: center; gap: 16px; background: var(--fx-forest); color: var(--fx-bone); font-family: var(--fx-display); font-weight: 700; font-size: 22px; text-transform: uppercase; padding: 18px 28px; border: 0; cursor: pointer; text-decoration: none; }
.fx-btn::after { content: '→'; color: var(--fx-leaf); }
.fx-btn:hover { background: var(--fx-deer); }
.fx-dark .fx-btn { background: var(--fx-leaf); color: var(--fx-forest); }
.fx-dark .fx-btn::after { color: var(--fx-forest); }

.fx-watermark { position: absolute; opacity: 0.07; pointer-events: none; } /* use icon-forest.png on bone, icon-leaf.png (0.06) on forest */