/* TextFromTrack — Design Tokens */
:root {
  /* Color */
  --tft-ink: #15161A;
  --tft-ink-2: #2C2E36;
  --tft-ink-3: #555861;
  --tft-mute: #8A8C92;
  --tft-line: #E6E2D8;
  --tft-line-2: #EFEBE0;
  --tft-paper: #F6F4EE;
  --tft-paper-2: #FBF9F3;
  --tft-card: #FFFFFF;

  /* Signal — active / playing / uploaded */
  --tft-signal: oklch(70% 0.18 145);
  --tft-signal-ink: oklch(38% 0.10 145);
  --tft-signal-soft: oklch(94% 0.06 145);

  /* Warning / time accents */
  --tft-amber: oklch(78% 0.14 75);

  /* Type */
  --tft-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --tft-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Radius */
  --tft-r-xs: 4px;
  --tft-r-sm: 8px;
  --tft-r-md: 12px;
  --tft-r-lg: 18px;
  --tft-r-xl: 24px;

  /* Shadow */
  --tft-shadow-sm: 0 1px 0 rgba(21,22,26,0.04), 0 1px 2px rgba(21,22,26,0.04);
  --tft-shadow-md: 0 1px 0 rgba(21,22,26,0.04), 0 8px 24px -8px rgba(21,22,26,0.10);
}

.tft-root {
  font-family: var(--tft-display);
  color: var(--tft-ink);
  background: var(--tft-paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tft-mono { font-family: var(--tft-mono); font-feature-settings: "zero", "ss02"; }

/* The TFT mark — bracketed T, scales by font-size */
.tft-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  font-family: var(--tft-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.tft-mark .b { color: currentColor; opacity: 0.45; font-weight: 400; }
.tft-mark .t { color: currentColor; }

/* Equalizer bars */
@keyframes tft-eq {
  0%,100% { transform: scaleY(0.35); }
  50%     { transform: scaleY(1); }
}
.tft-eq-bar { transform-origin: bottom; animation: tft-eq 1.1s ease-in-out infinite; }