/* =========================================================================
   Getfiit Design System — Colors & Type tokens
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --gf-bg:           #000000;        /* page background */
  --gf-surface:      #0E0E0E;        /* card surface */
  --gf-surface-2:    #161616;        /* nested panel */
  --gf-hairline:     #1F1F1F;        /* dividers, ring tracks, borders */
  --gf-stripe:       #181818;        /* placeholder stripe pattern */

  /* ---------- Color: foreground ---------- */
  --gf-fg-1:         #F5F5F5;        /* primary text, big numbers */
  --gf-fg-2:         #B5B5B5;        /* secondary text */
  --gf-fg-3:         #7A7A7A;        /* labels, captions */
  --gf-fg-4:         #3A3A3A;        /* disabled, ring tracks */

  /* ---------- Color: accent ---------- */
  --gf-accent:       #C6FF3D;        /* electric lime — primary brand color */
  --gf-accent-soft:  rgba(198, 255, 61, 0.12);
  --gf-accent-ink:   #0A1100;        /* readable on lime fills */

  /* ---------- Color: macros ---------- */
  --gf-macro-cal:    #9DEE2A;        /* calories — green */
  --gf-macro-pro:    #F8A4A0;        /* protein — coral */
  --gf-macro-carb:   #F08A2A;        /* carbs — orange */
  --gf-macro-fat:    #F4B72E;        /* fat — amber */

  /* ---------- Type families ---------- */
  --gf-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --gf-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --gf-font-mono:    'Inter', ui-monospace, monospace; /* tabular figs */

  /* ---------- Type sizes ---------- */
  --gf-size-hero:    160px;  /* 1,640 / 34.2 / 78.4 */
  --gf-size-h1:      96px;
  --gf-size-h2:      56px;
  --gf-size-h3:      32px;
  --gf-size-h4:      22px;
  --gf-size-body:    16px;
  --gf-size-small:   14px;
  --gf-size-label:   12px;   /* tracked uppercase labels */

  /* ---------- Spacing ---------- */
  --gf-sp-1: 4px;
  --gf-sp-2: 8px;
  --gf-sp-3: 12px;
  --gf-sp-4: 16px;
  --gf-sp-5: 20px;
  --gf-sp-6: 24px;
  --gf-sp-7: 32px;
  --gf-sp-8: 48px;
  --gf-sp-9: 64px;

  /* ---------- Radii ---------- */
  --gf-r-sm:    8px;
  --gf-r-md:    12px;
  --gf-r-lg:    20px;     /* cards */
  --gf-r-pill:  999px;

  /* ---------- Shadows / rings ---------- */
  --gf-ring:    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --gf-shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ---------- Motion ---------- */
  --gf-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --gf-dur-fast:  120ms;
  --gf-dur-base:  240ms;
  --gf-dur-slow:  600ms;
}

/* =========================================================================
   Semantic styles — apply directly via class
   ========================================================================= */

.gf-app {
  background: var(--gf-bg);
  color: var(--gf-fg-1);
  font-family: var(--gf-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero number (e.g. 34.2, 1,640) */
.gf-hero {
  font-family: var(--gf-font-display);
  font-weight: 800;
  font-size: var(--gf-size-hero);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--gf-fg-1);
  font-variant-numeric: tabular-nums;
}

/* Display headline (e.g. "Week recap.") */
.gf-h1 {
  font-family: var(--gf-font-display);
  font-weight: 800;
  font-size: var(--gf-size-h1);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--gf-fg-1);
}

.gf-h2 {
  font-family: var(--gf-font-display);
  font-weight: 800;
  font-size: var(--gf-size-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--gf-fg-1);
}

/* Card title (e.g. "Greek yogurt with berries & granola") */
.gf-h3 {
  font-family: var(--gf-font-display);
  font-weight: 700;
  font-size: var(--gf-size-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--gf-fg-1);
}

.gf-h4 {
  font-family: var(--gf-font-display);
  font-weight: 700;
  font-size: var(--gf-size-h4);
  line-height: 1.2;
  color: var(--gf-fg-1);
}

.gf-body {
  font-family: var(--gf-font-body);
  font-weight: 400;
  font-size: var(--gf-size-body);
  line-height: 1.5;
  color: var(--gf-fg-2);
}

.gf-small {
  font-family: var(--gf-font-body);
  font-weight: 500;
  font-size: var(--gf-size-small);
  line-height: 1.4;
  color: var(--gf-fg-3);
}

/* Tracked uppercase label — the workhorse of Getfiit metadata */
.gf-label {
  font-family: var(--gf-font-body);
  font-weight: 600;
  font-size: var(--gf-size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gf-fg-3);
}

/* Tabular numerals for stat columns */
.gf-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Wordmark */
.gf-wordmark {
  font-family: var(--gf-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--gf-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gf-wordmark::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gf-fg-4);
  display: inline-block;
}

/* Status dot (lime) */
.gf-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gf-accent);
  display: inline-block;
  flex-shrink: 0;
}

/* Card */
.gf-card {
  background: var(--gf-surface);
  border-radius: var(--gf-r-lg);
  padding: var(--gf-sp-7);
  box-shadow: var(--gf-ring);
  position: relative;
  overflow: hidden;
}

/* Lime pill */
.gf-pill-accent {
  display: inline-flex;
  align-items: center;
  gap: var(--gf-sp-2);
  padding: 8px 14px;
  border-radius: var(--gf-r-pill);
  background: var(--gf-accent-soft);
  color: var(--gf-accent);
  font-family: var(--gf-font-body);
  font-weight: 700;
  font-size: var(--gf-size-small);
}

/* Solid lime button */
.gf-btn-primary {
  background: var(--gf-accent);
  color: var(--gf-accent-ink);
  font-family: var(--gf-font-body);
  font-weight: 700;
  font-size: var(--gf-size-body);
  padding: 14px 22px;
  border-radius: var(--gf-r-pill);
  border: 0;
  cursor: pointer;
  transition: transform var(--gf-dur-fast) var(--gf-ease), filter var(--gf-dur-fast) var(--gf-ease);
}
.gf-btn-primary:hover  { filter: brightness(1.05); }
.gf-btn-primary:active { transform: scale(0.98); }

/* Ghost / outline button */
.gf-btn-ghost {
  background: transparent;
  color: var(--gf-fg-1);
  font-family: var(--gf-font-body);
  font-weight: 600;
  font-size: var(--gf-size-body);
  padding: 13px 22px;
  border-radius: var(--gf-r-pill);
  border: 1px solid var(--gf-hairline);
  cursor: pointer;
  transition: border-color var(--gf-dur-fast) var(--gf-ease);
}
.gf-btn-ghost:hover { border-color: var(--gf-fg-3); }

/* Hairline divider */
.gf-hr {
  border: 0;
  border-top: 1px solid var(--gf-hairline);
  margin: var(--gf-sp-5) 0;
}

/* Diagonal stripe placeholder */
.gf-stripe-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--gf-stripe) 0 1px,
      transparent 1px 16px
    ),
    var(--gf-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gf-fg-4);
  font-family: var(--gf-font-body);
  font-weight: 500;
  font-size: var(--gf-size-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}