/* =========================================================
   Fitness Flow — Foundations
   Colors + Typography
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter+Tight:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand ---------- */
  --ff-green:        #1D9E75;   /* primary */
  --ff-green-deep:   #0E5C44;   /* hover / pressed / on-light text */
  --ff-green-soft:   #E6F4EE;   /* tinted surfaces, badges */
  --ff-green-line:   #C9E5DA;   /* hairline on tinted backgrounds */

  --ff-clay:         #D97757;   /* single warm accent, used sparingly */
  --ff-clay-soft:    #F6E5DC;

  /* ---------- Neutrals (green-tinted, not pure gray) ---------- */
  --ff-ink:          #0E1F1A;   /* fg-primary */
  --ff-ink-2:        #2B3A35;   /* fg-secondary */
  --ff-ink-3:        #5A6B65;   /* fg-tertiary, captions */
  --ff-ink-4:        #8A9994;   /* fg-quaternary, placeholder */

  --ff-paper:        #F7F5F0;   /* warm off-white — primary bg */
  --ff-paper-2:      #EFECE4;   /* secondary surface */
  --ff-card:         #FFFFFF;   /* cards on paper */
  --ff-line:         #E4E0D6;   /* hairline border on paper */
  --ff-line-2:       #D4CFC1;   /* stronger border */

  /* ---------- Semantic ---------- */
  --ff-success:      var(--ff-green);
  --ff-warning:      #C68F1A;
  --ff-danger:       #C0453A;
  --ff-info:         #2F6FB5;

  /* ---------- Foreground roles ---------- */
  --fg-1: var(--ff-ink);
  --fg-2: var(--ff-ink-2);
  --fg-3: var(--ff-ink-3);
  --fg-4: var(--ff-ink-4);
  --fg-on-green: #FFFFFF;
  --fg-on-clay:  #FFFFFF;

  /* ---------- Background roles ---------- */
  --bg-1: var(--ff-paper);
  --bg-2: var(--ff-paper-2);
  --bg-card: var(--ff-card);
  --bg-ink: var(--ff-ink);

  /* ---------- Typography families ---------- */
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  /* Display — Instrument Sans, tight tracking, weight 600 */
  --t-display-1: 600 clamp(48px, 7vw, 88px)/0.96 var(--font-display);
  --t-display-2: 600 clamp(40px, 5.2vw, 64px)/1.0  var(--font-display);
  --t-h1:        600 clamp(32px, 3.6vw, 44px)/1.05 var(--font-display);
  --t-h2:        600 clamp(24px, 2.4vw, 32px)/1.15 var(--font-display);
  --t-h3:        600 20px/1.25 var(--font-display);

  /* Body — Inter Tight */
  --t-lead:   400 19px/1.5  var(--font-body);
  --t-body:   400 16px/1.55 var(--font-body);
  --t-small:  400 14px/1.5  var(--font-body);
  --t-caption:500 12px/1.4  var(--font-body);
  --t-mono:   500 13px/1.5  var(--font-mono);

  /* Tracking — display gets tight, eyebrows get wide */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 56px; --sp-16: 80px; --sp-20: 112px; --sp-24: 144px;

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows (green-tinted, low-contrast) ---------- */
  --sh-1: 0 1px 0 rgba(14,31,26,0.04), 0 1px 2px rgba(14,31,26,0.04);
  --sh-2: 0 2px 4px rgba(14,31,26,0.05), 0 8px 16px rgba(14,31,26,0.04);
  --sh-3: 0 8px 24px rgba(14,31,26,0.08), 0 24px 48px rgba(14,31,26,0.06);
  --sh-inset: inset 0 0 0 1px var(--ff-line);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  400ms;
}

/* =========================================================
   Semantic element styles
   ========================================================= */

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

.t-eyebrow {
  font: 500 12px/1 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display-1 { font: var(--t-display-1); letter-spacing: var(--tracking-display); }
.t-display-2 { font: var(--t-display-2); letter-spacing: var(--tracking-display); }
.t-h1        { font: var(--t-h1);        letter-spacing: var(--tracking-tight); }
.t-h2        { font: var(--t-h2);        letter-spacing: var(--tracking-tight); }
.t-h3        { font: var(--t-h3); }
.t-lead      { font: var(--t-lead);      color: var(--fg-2); }
.t-body      { font: var(--t-body); }
.t-small     { font: var(--t-small);     color: var(--fg-2); }
.t-caption   { font: var(--t-caption);   color: var(--fg-3); }
.t-mono      { font: var(--t-mono); }

a { color: var(--ff-green-deep); text-underline-offset: 3px; }
a:hover { color: var(--ff-green); }

::selection { background: var(--ff-green-soft); color: var(--ff-green-deep); }