/* =========================================================================
   FUEL AI — Base tokens (colors, type, radii, spacing, shadows)
   Dark-mode-first. All tokens referenced via var(--token-name).
   ========================================================================= */

:root {
  /* -------- BRAND COLORS -------- */
  --fuel-green:        #22c55d;   /* primary. ring, CTA, positive */
  --fuel-green-strong: #16a34a;   /* pressed / stronger accent */
  --fuel-green-soft:   #052e16;   /* tinted bg for green icon chips */
  --fuel-green-glow:   rgba(34, 197, 93, 0.35);

  --fuel-flame:        #ff4500;   /* streak / fire / urgent */
  --fuel-flame-soft:   #2f170f;   /* tinted bg */

  /* -------- NEUTRAL / SURFACE -------- */
  --bg:            #0a0a0a;       /* app background */
  --surface-1:     #111111;       /* cards */
  --surface-2:     #1a1a1a;       /* pills / nested */
  --surface-3:     #242424;       /* hover / elevated nested */
  --border:        rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);

  /* -------- TEXT -------- */
  --fg1:  #ffffff;                 /* primary text */
  --fg2:  #a1a1aa;                 /* secondary / labels */
  --fg3:  #71717a;                 /* tertiary / disabled */
  --fg-on-green: #052e16;          /* text on green CTA */

  /* -------- MACRO NUTRIENTS (from home screen) -------- */
  --macro-protein: #3b82f6;        /* blue */
  --macro-carbs:   #f97316;        /* orange */
  --macro-fat:     #eab308;        /* yellow */

  /* -------- SEMANTIC -------- */
  --success: var(--fuel-green);
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* -------- RADII -------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;         /* default card radius */
  --r-xl: 28px;
  --r-pill: 999px;

  /* -------- SPACING (4pt base) -------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;          /* default gutter */
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* -------- SHADOWS -------- */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-fab:   0 8px 24px rgba(34,197,93,0.35), 0 0 0 6px rgba(34,197,93,0.08);
  --shadow-pop:   0 20px 40px rgba(0,0,0,0.5);

  /* -------- TYPOGRAPHY FAMILIES -------- */
  /* SF Pro Display — uploaded Medium (500) only. Bolder weights synthesized. */
  /* In-app the real face is SF Pro Rounded; Display is the closest uploaded. */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- TYPE SCALE -------- */
  --t-display:   700 48px/1.05 var(--font-display);   /* hero numerals (266 kcal) */
  --t-h1:        800 32px/1.15 var(--font-display);
  --t-h2:        800 24px/1.2  var(--font-display);
  --t-h3:        700 20px/1.25 var(--font-display);
  --t-title:     700 17px/1.3  var(--font-display);   /* card titles */
  --t-body:      500 15px/1.45 var(--font-body);
  --t-body-b:    700 15px/1.4  var(--font-body);
  --t-label:     600 13px/1.3  var(--font-body);      /* Protein / Carbs / Fat */
  --t-caption:   500 12px/1.3  var(--font-body);
  --t-numeric-lg:800 56px/1.0  var(--font-display);   /* 497 */
  --t-numeric-md:800 32px/1.0  var(--font-display);   /* 131 */
}

/* =========================================================================
   SEMANTIC TEXT ELEMENTS
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); color: var(--fg1); letter-spacing: -0.01em; }
h2 { font: var(--t-h2); color: var(--fg1); letter-spacing: -0.01em; }
h3 { font: var(--t-h3); color: var(--fg1); }
p  { font: var(--t-body); color: var(--fg1); }
small, .caption { font: var(--t-caption); color: var(--fg2); }
code, pre { font: 500 13px/1.45 var(--font-mono); color: var(--fg1); }

.text-label   { font: var(--t-label); color: var(--fg2); }
.text-muted   { color: var(--fg2); }
.text-success { color: var(--fuel-green); }
.text-flame   { color: var(--fuel-flame); }
.numeric      { font: var(--t-numeric-lg); letter-spacing: -0.02em; }