/*! labelbrain.css — shared LabelBrain design system
 *  v0.1 — 2026-04-18 — staged for AM review
 *
 *  Goal: unify tokens (colours, radii, shadows, type) across every tool so we
 *  can restyle everything by editing one file. Non-breaking: pages that don't
 *  import this file are unaffected.
 *
 *  Usage:
 *    <link rel="stylesheet" href="/labelbrain.css">
 *
 *  Naming: --lb-* for tokens so we never collide with page-local CSS vars.
 */

/* ---------------------------------------------------------------------------
 * TOKENS
 * ------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --lb-bg:         #0b0f14;
  --lb-surface:    #121820;
  --lb-surface-2:  #181f29;
  --lb-surface-3:  #212a37;
  --lb-border:     #2a3442;
  --lb-border-strong:#3a4554;

  /* text */
  --lb-text:       #e8edf5;
  --lb-text-dim:   #99a3b4;
  --lb-text-faint: #6b7687;

  /* brand */
  --lb-accent:          #6366f1;  /* indigo — primary */
  --lb-accent-soft:     rgba(99,102,241,.14);
  --lb-accent-strong:   #818cf8;

  /* status */
  --lb-success: #22c55e;
  --lb-warning: #eab308;
  --lb-danger:  #ef4444;
  --lb-info:    #38bdf8;

  /* data-viz palette (qualitative, 6 steps) */
  --lb-viz-1: #6366f1;
  --lb-viz-2: #22c55e;
  --lb-viz-3: #eab308;
  --lb-viz-4: #ef4444;
  --lb-viz-5: #38bdf8;
  --lb-viz-6: #f472b6;

  /* type scale */
  --lb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
             Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --lb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --lb-fs-xs:  11px;
  --lb-fs-sm:  13px;
  --lb-fs-md:  15px;
  --lb-fs-lg:  18px;
  --lb-fs-xl:  22px;
  --lb-fs-xxl: 30px;
  --lb-fs-display: 40px;

  --lb-fw-regular: 500;
  --lb-fw-medium:  600;
  --lb-fw-bold:    700;
  --lb-fw-display: 800;

  /* radii */
  --lb-r-sm: 6px;
  --lb-r-md: 10px;
  --lb-r-lg: 14px;
  --lb-r-xl: 20px;
  --lb-r-pill: 999px;

  /* spacing — 4px grid */
  --lb-space-1: 4px;
  --lb-space-2: 8px;
  --lb-space-3: 12px;
  --lb-space-4: 16px;
  --lb-space-5: 20px;
  --lb-space-6: 24px;
  --lb-space-8: 32px;
  --lb-space-10:40px;

  /* shadows */
  --lb-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --lb-shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --lb-shadow-lg: 0 12px 32px rgba(0,0,0,.45);
  --lb-shadow-focus: 0 0 0 3px rgba(99,102,241,.35);

  /* animation */
  --lb-dur-fast: 120ms;
  --lb-dur-med:  200ms;
  --lb-dur-slow: 320ms;
  --lb-ease: cubic-bezier(.3,.7,.2,1);

  /* z */
  --lb-z-header: 50;
  --lb-z-dropdown: 60;
  --lb-z-modal: 70;
  --lb-z-toast: 80;
}

/* ---------------------------------------------------------------------------
 * RESET-LITE  (only applied when a page opts in by adding `.lb` to body)
 * Page-local styles keep winning unless they explicitly reference --lb-*.
 * ------------------------------------------------------------------------- */
body.lb {
  background: var(--lb-bg);
  color: var(--lb-text);
  font-family: var(--lb-font);
  font-size: var(--lb-fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
 * COMPONENTS — opt-in via .lb-* classes so we can adopt gradually
 * ------------------------------------------------------------------------- */

/* Card */
.lb-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-r-lg);
  padding: var(--lb-space-5);
  box-shadow: var(--lb-shadow-sm);
}
.lb-card--elevated { box-shadow: var(--lb-shadow-md); }
.lb-card--hover { transition: transform var(--lb-dur-med) var(--lb-ease), border-color var(--lb-dur-fast); }
.lb-card--hover:hover { transform: translateY(-2px); border-color: var(--lb-border-strong); }

/* Section header */
.lb-section-title {
  font-size: var(--lb-fs-xs);
  font-weight: var(--lb-fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lb-text-dim);
  margin-bottom: var(--lb-space-3);
}

/* Metric (KPI) */
.lb-metric-label { font-size: var(--lb-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--lb-text-dim); font-weight: var(--lb-fw-bold); }
.lb-metric-value { font-size: var(--lb-fs-xxl); font-weight: var(--lb-fw-display); color: var(--lb-text); letter-spacing: -.015em; line-height: 1.1; }
.lb-metric-delta { font-size: var(--lb-fs-sm); font-weight: var(--lb-fw-medium); }
.lb-metric-delta--up   { color: var(--lb-success); }
.lb-metric-delta--down { color: var(--lb-danger);  }
.lb-metric-delta--flat { color: var(--lb-text-dim);}

/* Buttons */
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: var(--lb-fs-sm); font-weight: var(--lb-fw-medium);
  padding: 8px 14px; border-radius: var(--lb-r-md); border: 1px solid transparent;
  background: var(--lb-surface-2); color: var(--lb-text); cursor: pointer;
  transition: background var(--lb-dur-fast), border-color var(--lb-dur-fast), color var(--lb-dur-fast);
  line-height: 1; white-space: nowrap;
}
.lb-btn:hover { background: var(--lb-surface-3); border-color: var(--lb-border-strong); }
.lb-btn:focus-visible { outline: none; box-shadow: var(--lb-shadow-focus); }
.lb-btn--primary { background: var(--lb-accent); color: #fff; }
.lb-btn--primary:hover { background: var(--lb-accent-strong); }
.lb-btn--ghost { background: transparent; border-color: var(--lb-border); }
.lb-btn--ghost:hover { background: var(--lb-accent-soft); border-color: var(--lb-accent); color: var(--lb-accent-strong); }
.lb-btn--sm { font-size: var(--lb-fs-xs); padding: 6px 10px; }
.lb-btn--icon { padding: 8px; }

/* Pills (week selectors, filter chips) */
.lb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--lb-r-pill); border: 1px solid var(--lb-border);
  background: var(--lb-surface-2); color: var(--lb-text-dim);
  font-size: var(--lb-fs-xs); font-weight: var(--lb-fw-bold); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: background var(--lb-dur-fast), color var(--lb-dur-fast), border-color var(--lb-dur-fast);
}
.lb-pill:hover { background: var(--lb-surface-3); color: var(--lb-text); }
.lb-pill[aria-pressed='true'], .lb-pill.is-active {
  background: var(--lb-accent-soft); color: var(--lb-accent-strong); border-color: var(--lb-accent);
}

/* Tabs */
.lb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lb-border); padding: 0 var(--lb-space-2); }
.lb-tab  {
  appearance: none; background: transparent; border: none; color: var(--lb-text-dim);
  padding: 10px 14px; font-size: var(--lb-fs-sm); font-weight: var(--lb-fw-medium); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color var(--lb-dur-fast), border-color var(--lb-dur-fast);
}
.lb-tab:hover { color: var(--lb-text); }
.lb-tab[aria-selected='true'], .lb-tab.is-active { color: var(--lb-accent-strong); border-bottom-color: var(--lb-accent); }

/* Badges */
.lb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--lb-r-pill);
  font-size: var(--lb-fs-xs); font-weight: var(--lb-fw-bold); letter-spacing: .04em; text-transform: uppercase;
  background: var(--lb-surface-3); color: var(--lb-text-dim);
}
.lb-badge--success { background: rgba(34,197,94,.14);  color: #86efac; }
.lb-badge--warn    { background: rgba(234,179,8,.14);  color: #fde047; }
.lb-badge--danger  { background: rgba(239,68,68,.14);  color: #fca5a5; }
.lb-badge--info    { background: rgba(56,189,248,.14); color: #7dd3fc; }
.lb-badge--accent  { background: var(--lb-accent-soft); color: var(--lb-accent-strong); }

/* Table */
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lb-fs-sm); }
.lb-table th {
  text-align: left; font-size: var(--lb-fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--lb-text-dim); font-weight: var(--lb-fw-bold);
  padding: 10px 12px; border-bottom: 1px solid var(--lb-border); background: var(--lb-surface-2);
}
.lb-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--lb-border); color: var(--lb-text);
}
.lb-table tbody tr:hover td { background: var(--lb-surface-2); }
.lb-table--compact td, .lb-table--compact th { padding: 7px 10px; }

/* Input */
.lb-input, .lb-select {
  font-family: inherit; font-size: var(--lb-fs-sm); color: var(--lb-text);
  background: var(--lb-surface-2); border: 1px solid var(--lb-border);
  border-radius: var(--lb-r-md); padding: 8px 12px; line-height: 1.2;
  transition: border-color var(--lb-dur-fast), box-shadow var(--lb-dur-fast);
}
.lb-input:focus, .lb-select:focus { outline: none; border-color: var(--lb-accent); box-shadow: var(--lb-shadow-focus); }

/* Divider */
.lb-divider { height: 1px; background: var(--lb-border); margin: var(--lb-space-5) 0; border: 0; }

/* Skeleton / loading */
@keyframes lb-skel { 0%{background-position:-200px 0;} 100%{background-position:calc(200px + 100%) 0;} }
.lb-skel {
  display: inline-block; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--lb-surface-2) 0%, var(--lb-surface-3) 50%, var(--lb-surface-2) 100%);
  background-size: 200px 100%;
  animation: lb-skel 1.2s infinite linear;
}

/* Mobile helpers */
@media (max-width: 640px) {
  .lb-hide-sm { display: none !important; }
  .lb-metric-value { font-size: var(--lb-fs-xl); }
  .lb-card { padding: var(--lb-space-4); }
}