/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — Bee Inspector design tokens
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --bi-primary:          #0E5BB8;
  --bi-primary-pressed:  #0A478F;
  --bi-primary-soft:     #E6EEF9;

  --bi-accent:           #E89412;
  --bi-accent-soft:      #FBEAD0;
  --bi-accent-pressed:   #C97E0A;

  --bi-bg:               #F4F6FA;
  --bi-surface:          #FFFFFF;
  --bi-surface-alt:      #FAFBFD;

  --bi-text:             #151B2E;
  --bi-text-muted:       #5B6372;
  --bi-text-subtle:      #8A909D;

  --bi-border:           #E3E7EF;
  --bi-border-strong:    #C9D0DC;

  --bi-success:          #1F8F5A;
  --bi-success-soft:     #DCF1E6;
  --bi-warning:          #C67C0B;
  --bi-warning-soft:     #FBEAD0;
  --bi-error:            #C2302B;
  --bi-error-soft:       #F6DDDC;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --bi-radius-sm:    6px;
  --bi-radius-btn:   10px;
  --bi-radius-card:  14px;
  --bi-radius-pill:  999px;

  /* ── Spacing (4-pt grid) ───────────────────────────────────────────────── */
  --bi-space-1:   4px;
  --bi-space-2:   8px;
  --bi-space-3:  12px;
  --bi-space-4:  16px;
  --bi-space-5:  20px;
  --bi-space-6:  24px;
  --bi-space-8:  32px;
  --bi-space-10: 40px;
  --bi-space-12: 48px;
  --bi-space-16: 64px;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --bi-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --bi-font-family:  'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --bi-fs-xs:    12px;
  --bi-fs-sm:    14px;
  --bi-fs-base:  16px;
  --bi-fs-lg:    18px;
  --bi-fs-xl:    22px;
  --bi-fs-2xl:   28px;
  --bi-fs-3xl:   36px;

  --bi-fw-regular:  400;
  --bi-fw-medium:   500;
  --bi-fw-semibold: 600;
  --bi-fw-bold:     700;

  --bi-lh-tight:   1.2;
  --bi-lh-normal:  1.5;
  --bi-lh-relaxed: 1.65;

  /* ── Touch targets ─────────────────────────────────────────────────────── */
  --bi-min-tap:    44px;
  --bi-chip-min:   40px;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --bi-shadow-1: 0 1px 3px rgba(21,27,46,.07), 0 1px 2px rgba(21,27,46,.04);
  --bi-shadow-2: 0 4px 14px rgba(21,27,46,.09), 0 2px 4px rgba(21,27,46,.04);
  --bi-shadow-3: 0 16px 36px rgba(21,27,46,.13), 0 4px 10px rgba(21,27,46,.06);
  --bi-shadow-hover: 0 20px 48px rgba(14,91,184,.15), 0 6px 16px rgba(0,0,0,.06);

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --bi-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --bi-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bi-bg);
  color: var(--bi-text);
  font-family: var(--bi-font-family);
  font-size: var(--bi-fs-base);
  line-height: var(--bi-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Component primitives ───────────────────────────────────────────────── */
.bi-card {
  background: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: var(--bi-radius-card);
  padding: var(--bi-space-5);
}

.bi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bi-space-2);
  min-height: var(--bi-min-tap);
  padding: 0 var(--bi-space-5);
  border: 1px solid transparent;
  border-radius: var(--bi-radius-btn);
  font-family: inherit;
  font-size: var(--bi-fs-base);
  font-weight: var(--bi-fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.bi-btn--primary { background: var(--bi-primary); color: #fff; }
.bi-btn--primary:hover  { background: var(--bi-primary-pressed); }
.bi-btn--primary:active { background: var(--bi-primary-pressed); }

.bi-btn--secondary {
  background: var(--bi-surface);
  color: var(--bi-primary);
  border-color: var(--bi-border-strong);
}

.bi-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--bi-chip-min);
  padding: 0 var(--bi-space-4);
  background: var(--bi-surface);
  color: var(--bi-text);
  border: 1px solid var(--bi-border);
  border-radius: var(--bi-radius-pill);
  font-size: var(--bi-fs-sm);
  font-weight: var(--bi-fw-medium);
}
.bi-chip[aria-pressed="true"] {
  background: var(--bi-primary);
  color: #fff;
  border-color: var(--bi-primary);
}