/* FitTrack – Design Tokens
 * Editorial-sport aesthetic: warm neutrals + a single citrus accent.
 * Light & dark are the same system, re-toned.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root, [data-theme="light"] {
  --bg:          oklch(0.975 0.008 80);
  --bg-sunk:     oklch(0.955 0.010 80);
  --surface:     oklch(1     0      0);
  --surface-2:   oklch(0.985 0.006 80);
  --line:        oklch(0.90  0.012 75);
  --line-soft:   oklch(0.935 0.010 78);

  --ink:         oklch(0.22  0.018 55);
  --ink-soft:    oklch(0.40  0.014 60);
  --ink-mute:    oklch(0.58  0.010 65);
  --ink-faint:   oklch(0.74  0.008 70);

  --accent-hue:  55;
  --accent:      oklch(0.72 0.17  var(--accent-hue));
  --accent-ink:  oklch(0.22 0.05  var(--accent-hue));
  --accent-wash: oklch(0.96 0.04 var(--accent-hue));
  --accent-line: oklch(0.86 0.10 var(--accent-hue));

  --data-1:      oklch(0.60 0.14  35);
  --data-2:      oklch(0.68 0.13 165);
  --data-3:      oklch(0.58 0.12 260);
  --data-pos:    oklch(0.62 0.13 150);
  --data-neg:    oklch(0.58 0.17  28);

  --shadow-sm:   0 1px 0 oklch(0.85 0.01 70 / 0.5);
  --shadow-md:   0 6px 24px -12px oklch(0.25 0.02 60 / 0.18), 0 1px 0 oklch(0.85 0.01 70 / 0.5);
  --shadow-lg:   0 20px 50px -20px oklch(0.20 0.02 60 / 0.22);

  --hero-bg:     oklch(0.22 0.020 55);
  --hero-ink:    oklch(0.98 0.010 80);
  --hero-soft:   oklch(0.72 0.012 70);
  --hero-line:   oklch(1 0 0 / 0.14);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans:  'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg:          oklch(0.17  0.012 60);
  --bg-sunk:     oklch(0.14  0.012 60);
  --surface:     oklch(0.21  0.012 60);
  --surface-2:   oklch(0.24  0.012 60);
  --line:        oklch(0.30  0.014 60);
  --line-soft:   oklch(0.26  0.014 60);

  --ink:         oklch(0.96  0.010 80);
  --ink-soft:    oklch(0.82  0.010 75);
  --ink-mute:    oklch(0.62  0.010 70);
  --ink-faint:   oklch(0.42  0.010 65);

  --accent:      oklch(0.82 0.16 var(--accent-hue));
  --accent-ink:  oklch(0.18 0.04 var(--accent-hue));
  --accent-wash: oklch(0.28 0.06 var(--accent-hue));
  --accent-line: oklch(0.40 0.10 var(--accent-hue));

  --data-1:      oklch(0.72 0.14  35);
  --data-2:      oklch(0.76 0.12 165);
  --data-3:      oklch(0.72 0.12 260);
  --data-pos:    oklch(0.72 0.14 150);
  --data-neg:    oklch(0.70 0.16  28);

  --shadow-sm:   0 1px 0 oklch(0 0 0 / 0.4);
  --shadow-md:   0 8px 28px -12px oklch(0 0 0 / 0.5), 0 1px 0 oklch(0 0 0 / 0.4);
  --shadow-lg:   0 24px 60px -20px oklch(0 0 0 / 0.6);

  --hero-bg:     oklch(0.97 0.012 80);
  --hero-ink:    oklch(0.20 0.018 55);
  --hero-soft:   oklch(0.45 0.014 60);
  --hero-line:   oklch(0 0 0 / 0.08);
}

/* Density modifier */
[data-density="cozy"]   { --pad: 20px; --gap: 14px; }
[data-density="comfy"]  { --pad: 16px; --gap: 12px; }
[data-density="compact"]{ --pad: 12px; --gap: 10px; }
:root { --pad: 16px; --gap: 12px; }

/* Base */
.ft-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.ft-root *, .ft-root *::before, .ft-root *::after { box-sizing: border-box; }

.ft-serif { font-family: var(--font-serif); font-feature-settings: "ss01"; letter-spacing: -0.02em; }
.ft-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ft-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ft-figure {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

.ft-btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ft-btn:hover { background: var(--surface-2); }
.ft-btn:active { transform: scale(.98); }
.ft-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ft-btn.primary:hover { opacity: .9; }
.ft-btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ft-btn.ghost { background: transparent; border-color: var(--line-soft); color: var(--ink-soft); }

.ft-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface);
  display: inline-flex; align-items: center; gap: 6px;
}

.ft-input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ft-input:focus {
  border-color: var(--ink-mute);
  box-shadow: 0 0 0 3px oklch(from var(--ink) l c h / 0.08);
}
.ft-input::placeholder { color: var(--ink-faint); }

/* Hairlines */
.ft-hair { border: 1px solid var(--line); }
.ft-hair-soft { border: 1px solid var(--line-soft); }

.ft-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--pad);
}

.ft-track { background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.ft-fill  { background: var(--ink); height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* No-emoji icon baseline */
.ft-ico { display: inline-flex; width: 18px; height: 18px; stroke-width: 1.6; }

/* Remove scrollbars */
.ft-root ::-webkit-scrollbar { width: 0; height: 0; }
.ft-root { scrollbar-width: none; }