/* ─────────────────────────────────────────────────────────────
   Design Tokens · single source of truth
   Inspired by VoltAgent + Linear DESIGN.md systems
   Dark canvas · single electric-green accent · hairline borders
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Color · brand ─── */
  --c-primary:        #00d992;
  --c-primary-soft:   #2fd6a1;
  --c-primary-deep:   #10b981;
  --c-on-primary:     #0a0a0a;

  /* ─── Color · surface ─── */
  --c-canvas:         #0a0a0a;
  --c-canvas-soft:    #141414;
  --c-surface-1:      #161616;
  --c-surface-2:      #1c1c1c;

  /* ─── Color · borders ─── */
  --c-hairline:       #2a2a2a;
  --c-hairline-soft:  #1f1f1f;
  --c-hairline-strong:#3d3d3d;

  /* ─── Color · ink ─── */
  --c-ink-strong:     #ffffff;
  --c-ink:            #f2f2f2;
  --c-body:           #bdbdbd;
  --c-mute:           #8b949e;
  --c-mute-deep:      #62666d;

  /* ─── Color · semantic ─── */
  --c-amber:          #f59e0b;
  --c-amber-soft:     rgba(245, 158, 11, 0.12);

  /* ─── Typography · families ─── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Typography · scale ─── */
  --fs-display-xl: 60px;
  --fs-display-lg: 36px;
  --fs-display-md: 24px;
  --fs-display-sm: 20px;
  --fs-eyebrow:    13px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-code:       13px;

  --lh-display-xl: 1.05;
  --lh-display-lg: 1.15;
  --lh-display-md: 1.3;
  --lh-body:       1.55;
  --lh-tight:      1.25;

  --ls-display:        -0.02em;
  --ls-display-tight:  -0.03em;
  --ls-eyebrow:        0.18em;
  --ls-body:           -0.005em;

  /* ─── Spacing (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: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ─── Radius ─── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 9999px;

  /* ─── Border widths ─── */
  --bw-hair: 1px;
  --bw-emphasis: 2px;

  /* ─── Motion ─── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;

  /* ─── Container ─── */
  --container-max: 1280px;
  --gutter-x: var(--sp-8);
}

@media (max-width: 900px) {
  :root {
    --fs-display-xl: 40px;
    --fs-display-lg: 28px;
    --gutter-x: var(--sp-5);
  }
}

@media (max-width: 600px) {
  :root {
    --fs-display-xl: 32px;
    --gutter-x: var(--sp-4);
  }
}

/* ─── Utility primitives ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-mute);
}

.mono { font-family: var(--font-mono); }