/* ============================================================
   REFUEL — Colors & Type
   Frozen ready-to-eat protein meals · Rosario, Argentina
   Fonts: League Gothic (display) + Roboto Mono (data/labels) — both self-hosted.
   League Gothic is the tall condensed display face of the wordmark.
   ============================================================ */

/* Self-hosted brand display face — League Gothic (variable width axis) */
@font-face {
  font-family: 'League Gothic';
  src: url('fonts/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted data face — Roboto Mono (variable weight axis) */
@font-face {
  font-family: 'Roboto Mono';
  src: url('fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Core brand palette (from brand identity v1.0) ---- */
  --deep-black:  #1A1A1A;   /* primary background */
  --amber:       #FFB347;   /* signature accent — the "fuel" */
  --bone-white:  #F0EDE8;   /* light surfaces / inverse bg */
  --charcoal:    #2E2E2E;   /* elevated surfaces on black */
  --dark-amber:  #2C1A00;   /* deep amber-tinted background */

  /* ---- Extended / derived ---- */
  --pure-black:    #0E0E0E;  /* deepest layer, true backdrop */
  --amber-bright:  #FFC062;  /* hover lift on amber */
  --amber-press:   #E89A2E;  /* pressed amber */
  --amber-dim:     #C98A35;  /* the dimmed "fuel bar" amber */
  --charcoal-2:    #3A3A3A;  /* hairline borders on dark */
  --charcoal-line: #444444;  /* visible borders on dark */

  /* ---- Semantic foreground (on dark) ---- */
  --fg1: #F0EDE8;            /* primary text  (bone white) */
  --fg2: #B8B4AC;            /* secondary text */
  --fg3: #7A776F;            /* tertiary / muted, meta */
  --fg-accent: #FFB347;      /* accent text */

  /* ---- Semantic foreground (on light / bone) ---- */
  --fg1-inv: #1A1A1A;
  --fg2-inv: #4A463F;
  --fg3-inv: #8A857A;

  /* ---- Surfaces ---- */
  --bg:        var(--deep-black);
  --bg-deep:   var(--pure-black);
  --surface:   var(--charcoal);
  --surface-2: #242424;
  --border:    rgba(240,237,232,0.12);
  --border-strong: rgba(240,237,232,0.22);

  /* ---- Status (used sparingly, brand-tinted) ---- */
  --positive: #5FB87A;
  --warning:  #FFB347;
  --danger:   #E5544B;

  /* ---- Type families ---- */
  --font-display: 'League Gothic', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (display = condensed black, mono = data) ---- */
  --fs-display:  clamp(56px, 9vw, 120px);
  --fs-h1:       clamp(40px, 6vw, 72px);
  --fs-h2:       clamp(30px, 4vw, 46px);
  --fs-h3:       24px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-mono:     14px;
  --fs-label:    12px;   /* mono micro-labels */

  /* ---- Radii — REFUEL is sharp. Tight corners only. ---- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Shadows / elevation (on near-black, shadows are subtle) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
  --glow-amber: 0 0 24px rgba(255,179,71,0.45);
}

/* ============================================================
   Base element styling — apply with class .refuel on a root
   ============================================================ */
.refuel {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* League Gothic is a single-weight condensed face — never faux-bold it */
.refuel, .display, .h1, .h2, .h3, .stat {
  font-synthesis: none;
}

/* Display headings — condensed, tall, tight, uppercase */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin: 0;
  color: var(--fg1);
}
.display { font-size: var(--fs-display); letter-spacing: -0.01em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.0; }

/* Body */
.p   { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--fg2); line-height: 1.6; margin: 0; }
.lead{ font-family: var(--font-mono); font-size: var(--fs-body-lg); color: var(--fg1); line-height: 1.55; }
.small { font-size: var(--fs-small); color: var(--fg3); }

/* Mono micro-label — the workhorse: nutrition rows, meta, kicker */
.label, .kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg3);
}
.kicker { color: var(--fg-accent); }

/* Big stat — protein-gram treatment */
.stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 0.9;
  color: var(--fg1);
}
.stat-unit { font-size: 0.5em; }

a.link { color: var(--fg-accent); text-decoration: none; }
a.link:hover { text-decoration: underline; }