/* ===================================================================
   CARTFIT.AI · tokens.css
   design tokens + reset + base text atoms (.tag/.mono)
   load order matters — see index.html
   =================================================================== */

/* =================================================================
   CARTFIT.AI — tokens + global
   ================================================================= */
:root {
  /* bg / fg */
  --bg-0: #000000;
  --bg-1: #0A0A0A;
  --bg-2: #111111;
  --fg-0: #FFFFFF;
  --fg-1: #E6E6E6;
  --fg-2: #ABABAB;
  --fg-3: #707070;
  --line-1: #1F1F1F;
  --line-2: #2A2A2A;
  --line-3: #3A3A3A;
  --accent: #C8FF00;

  /* type */
  --font-display: 'Barlow Condensed', 'Zen Kaku Gothic New', sans-serif;
  --font-sans:    'Barlow', 'Zen Kaku Gothic New', sans-serif;
  --font-jp:      'Zen Kaku Gothic New', 'Barlow', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* layout */
  --page-pad: clamp(24px, 4vw, 56px);
  --nav-h: 64px;
  --bar-h: 40px;
  --rail-w: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg-0); }

/* mono tag */
.tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.tag--strong { color: var(--fg-0); }
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
}
.mono--data { color: var(--fg-0); font-size: 12.5px; }
.mono--accent { color: var(--accent); }

/* ── mobile (≤768) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h: 56px;
    --bar-h: 36px;
    --page-pad: 20px;
  }
  /* tags may wrap again on narrow screens */
  .tag { white-space: normal; }
}