/* ============================================================
   Carup Design Tokens
   - Monochrome canvas + single lime accent
   - Tight technical type, mono for all numbers
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

* { box-sizing: border-box; }

:root {
  /* ---------- Color ---------- */
  --bg-0: #0A0A0B;
  --bg-1: #131316;
  --bg-2: #1B1B1F;
  --bg-3: #25252A;

  --line-1: rgb(255 255 255 / 0.06);
  --line-2: rgb(255 255 255 / 0.12);
  --line-3: rgb(255 255 255 / 0.20);

  --fg-1: #FAFAF7;
  --fg-2: rgb(250 250 247 / 0.64);
  --fg-3: rgb(250 250 247 / 0.40);
  --fg-4: rgb(250 250 247 / 0.24);

  --accent: #CFFF50;
  --accent-ink: #0A0A0B;
  --accent-dim: #A8D43F;

  --pos: #5BD68A;
  --pos-bg: rgb(91 214 138 / 0.10);
  --neg: #FF6B5B;
  --neg-bg: rgb(255 107 91 / 0.10);
  --warn: #FFC85B;
  --warn-bg: rgb(255 200 91 / 0.10);

  /* ---------- Typography ---------- */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display-1: 600 80px/1.02 var(--font-sans);
  --t-display-2: 600 56px/1.04 var(--font-sans);
  --t-display-3: 600 40px/1.08 var(--font-sans);

  --t-h1: 600 32px/1.12 var(--font-sans);
  --t-h2: 600 24px/1.20 var(--font-sans);
  --t-h3: 500 18px/1.30 var(--font-sans);
  --t-h4: 500 14px/1.40 var(--font-sans);

  --t-body-lg: 400 18px/1.55 var(--font-sans);
  --t-body:    400 16px/1.55 var(--font-sans);
  --t-body-sm: 400 14px/1.50 var(--font-sans);
  --t-body-xs: 400 12px/1.45 var(--font-sans);

  --t-eyebrow: 600 11px/1 var(--font-sans);
  --tracking-eyebrow: 0.10em;

  --t-mono-lg: 500 24px/1.20 var(--font-mono);
  --t-mono:    500 14px/1.45 var(--font-mono);
  --t-mono-sm: 500 12px/1.40 var(--font-mono);

  --tracking-display: -0.025em;
  --tracking-tight: -0.015em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --bw: 1px;

  /* ---------- Shadows ---------- */
  --shadow-1: inset 0 1px 0 rgb(255 255 255 / 0.04);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.6);
  --shadow-3: 0 24px 48px rgb(0 0 0 / 0.7);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 280ms;
  --d-4: 360ms;
}

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font: var(--t-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

code, pre, kbd, samp,
.mono, table {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

h1 { font: var(--t-display-2); letter-spacing: var(--tracking-display); margin: 0; }
h2 { font: var(--t-h1);        letter-spacing: var(--tracking-tight);   margin: 0; }
h3 { font: var(--t-h2);        letter-spacing: var(--tracking-tight);   margin: 0; }
h4 { font: var(--t-h3);        margin: 0; }
h5 { font: var(--t-h4);        margin: 0; }

p  { font: var(--t-body); color: var(--fg-1); margin: 0; text-wrap: pretty; }
small { font: var(--t-body-sm); color: var(--fg-2); }

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--d-1) var(--ease);
}
a:hover { text-decoration-color: var(--fg-1); }

hr {
  border: 0;
  border-top: var(--bw) solid var(--line-2);
  margin: var(--s-6) 0;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.muted  { color: var(--fg-2); }
.faint  { color: var(--fg-3); }

.num    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.unit   { color: var(--fg-3); margin-left: 0.25ch; font-size: 0.85em; }

.delta-pos { color: var(--pos); }
.delta-neg { color: var(--neg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.hairline { border-top: var(--bw) solid var(--line-2); }

.card {
  background: var(--bg-1);
  border: var(--bw) solid var(--line-2);
  border-radius: var(--r-2);
  padding: var(--s-4);
}