/* ============================================================================
   BookCrew Dashboard - shared design tokens (standalone, Tailwind-free)
   Distilled from artifacts/bookcrew-dashboard/src/styles/bookcrew-ds.css
   The LAW: warm ivory canvas · green is the ONLY chroma · near-flat hairline
   cards · tabular JetBrains Mono numbers · white sidebar · status DOTS not
   loud pills · Bricolage Grotesque (display) + Hanken Grotesk (body).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap');

:root {
  /* Neutral scale - warm gray (Stripe-calm) */
  --n-0:#FFFFFF; --n-50:#FAFAF9; --n-100:#F4F3F1; --n-200:#E8E6E2; --n-300:#D6D2CC;
  --n-400:#A8A29A; --n-500:#79736C; --n-600:#57524B; --n-700:#423D37; --n-800:#2A2622;
  --n-900:#1F1B18; --n-950:#1A1613;
  --hairline:var(--n-200); --hairline-strong:var(--n-300);

  /* Brand green (brand @ 600) */
  --g-50:#F2F6F2; --g-100:#DCE9D7; --g-200:#BFD6B5; --g-300:#96BD88; --g-400:#6B9E5A;
  --g-500:#4E8A41; --g-600:#457C3C; --g-700:#396830; --g-800:#2D5126; --g-900:#213E1C; --g-950:#152811;

  /* Semantic */
  --success-fg:#396830; --success-bg:#F0F5EE; --success-border:#BFD6B5;
  --warning-fg:#94600E; --warning-bg:#FBF3E4; --warning-border:#F0D9A8;
  --danger-fg:#B23A2E;  --danger-bg:#FBECEA;  --danger-border:#F2C4BD;
  --info-fg:#3B5BA9;    --info-bg:#EEF2FB;    --info-border:#C9D6F0;

  /* Data-viz */
  --data-clay:#B87F6B; --data-clay-bg:#F4EAE5; --data-clay-fg:#96593F; --data-slate:#6B7B8C;
  --chart-area-from:rgba(69,124,60,0.22); --chart-area-to:rgba(69,124,60,0);

  /* Type */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',Menlo,monospace;

  /* Spacing / radius */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-card:12px; --radius-control:8px; --radius-pill:999px;

  /* Elevation - near-flat, hairline-first */
  --elev-1:0 0 0 1px rgba(26,22,18,0.06), 0 1px 1px -0.5px rgba(26,22,18,0.04);
  --elev-2:0 0 0 1px rgba(26,22,18,0.06), 0 2px 6px -2px rgba(26,22,18,0.08);
  --elev-3:0 0 0 1px rgba(26,22,18,0.05), 0 8px 24px -6px rgba(26,22,18,0.12);
  --elev-4:0 0 0 1px rgba(26,22,18,0.05), 0 16px 48px -12px rgba(26,22,18,0.18);

  /* Motion */
  --dur-hover:150ms; --dur-standard:180ms; --ease-out:cubic-bezier(0.2,0,0,1);
  --focus-ring:0 0 0 3px rgba(69,124,60,0.30);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--n-50); color:var(--n-950); font-family:var(--font-body);
  font-size:14px; line-height:1.571; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Type scale */
.bc-display{font-family:var(--font-display);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.02em;}
.bc-h1{font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:600;letter-spacing:-0.02em;}
.bc-h2{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:600;letter-spacing:-0.01em;}
.bc-h3{font-family:var(--font-body);font-size:16px;line-height:22px;font-weight:600;}
.bc-body-lg{font-size:16px;line-height:24px;font-weight:400;}
.bc-body{font-size:14px;line-height:22px;font-weight:400;}
.bc-body-sm{font-size:13px;line-height:18px;font-weight:400;color:var(--n-600);}
.bc-label{font-size:11px;line-height:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--n-500);}
.bc-metric{font-family:var(--font-mono);font-size:30px;line-height:36px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--n-950);}
.bc-metric-lg{font-family:var(--font-mono);font-size:40px;line-height:46px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--n-950);}
.bc-metric-sm{font-family:var(--font-mono);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;color:var(--n-950);}
.bc-num,[data-numeric]{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.bc-muted{color:var(--n-600);} .bc-faint{color:var(--n-500);}

/* Card */
.bc-card{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-card);box-shadow:var(--elev-1);padding:var(--space-5);}
.bc-card-interactive{transition:box-shadow var(--dur-standard) var(--ease-out),border-color var(--dur-standard) var(--ease-out);cursor:pointer;}
.bc-card-interactive:hover{box-shadow:var(--elev-2);border-color:var(--n-300);}
.bc-hairline{border:1px solid var(--hairline);}
.bc-hairline-top{border-top:1px solid var(--hairline);}
.bc-hairline-bottom{border-bottom:1px solid var(--hairline);}

/* Buttons */
.bc-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:var(--radius-control);border:1px solid transparent;cursor:pointer;transition:all var(--dur-hover) var(--ease-out);white-space:nowrap;}
.bc-btn-primary{background:var(--g-600);color:var(--n-0);}
.bc-btn-primary:hover{background:var(--g-700);}
.bc-btn-ghost{background:var(--n-0);color:var(--n-700);border-color:var(--n-200);}
.bc-btn-ghost:hover{background:var(--n-100);border-color:var(--n-300);}
.bc-btn-sm{padding:5px 10px;font-size:12px;}

/* Badge (green/amber/red/info/neutral) - quiet by default */
.bc-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:16px;padding:2px 9px;border-radius:var(--radius-pill);border:1px solid transparent;}
.bc-badge .dot{width:6px;height:6px;border-radius:999px;background:currentColor;}
.bc-badge-green{color:var(--success-fg);background:var(--success-bg);border-color:var(--success-border);}
.bc-badge-amber{color:var(--warning-fg);background:var(--warning-bg);border-color:var(--warning-border);}
.bc-badge-red{color:var(--danger-fg);background:var(--danger-bg);border-color:var(--danger-border);}
.bc-badge-info{color:var(--info-fg);background:var(--info-bg);border-color:var(--info-border);}
.bc-badge-neutral{color:var(--n-600);background:var(--n-100);border-color:var(--n-200);}

/* Status dot + neutral text (preferred over loud pills) */
.bc-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--n-700);}
.bc-dot{width:6px;height:6px;border-radius:999px;flex:0 0 auto;background:var(--n-400);}
.bc-dot-active,.bc-dot-positive,.bc-dot-brand{background:var(--g-600);}
.bc-dot-warning{background:var(--warning-fg);} .bc-dot-danger{background:var(--danger-fg);}
.bc-dot-info{background:var(--data-slate);} .bc-dot-neutral{background:var(--n-400);}
.bc-dot-pulse{position:relative;} .bc-dot-pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;background:inherit;opacity:.35;animation:bc-pulse 1.8s var(--ease-out) infinite;}
@keyframes bc-pulse{0%{transform:scale(1);opacity:.35;}70%,100%{transform:scale(2.2);opacity:0;}}

/* Delta chip - up=green, down=clay (never loud red) */
.bc-delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;white-space:nowrap;}
.bc-delta::before{font-size:9px;line-height:1;}
.bc-delta-up{color:var(--success-fg);} .bc-delta-up::before{content:"▲";}
.bc-delta-down{color:var(--data-clay-fg);} .bc-delta-down::before{content:"▼";}
.bc-delta-flat{color:var(--n-500);} .bc-delta-flat::before{content:"→";font-size:11px;}

/* Dense table (Stripe-style) */
.bc-table{width:100%;border-collapse:collapse;font-family:var(--font-body);}
.bc-table thead th{font-size:11px;line-height:14px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--n-600);text-align:left;padding:8px 12px;border-bottom:1px solid var(--hairline-strong);white-space:nowrap;}
.bc-table tbody td{font-size:13px;line-height:18px;color:var(--n-800);padding:11px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
.bc-table tbody tr{transition:background-color var(--dur-hover) var(--ease-out);}
.bc-table tbody tr:hover{background:var(--n-100);}
.bc-table tbody tr:last-child td{border-bottom:0;}
.bc-td-num,.bc-th-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;}
.bc-th-num{font-family:var(--font-body);}

/* Avatar (initials) */
.bc-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--g-50);color:var(--g-700);font-weight:600;font-size:12px;flex:0 0 auto;}

/* Sidebar / nav (WHITE sidebar) */
.bc-sidebar{background:var(--n-0);border-right:1px solid var(--n-200);width:236px;flex:0 0 236px;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;}
.bc-navitem{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--radius-control);color:var(--n-700);font-size:14px;font-weight:500;text-decoration:none;transition:background var(--dur-hover) var(--ease-out);cursor:pointer;}
.bc-navitem:hover{background:var(--n-100);}
.bc-navitem.active{background:var(--g-50);color:var(--g-700);font-weight:600;}
.bc-navitem svg{width:18px;height:18px;flex:0 0 auto;stroke-width:1.8;}
.bc-navgroup{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--n-400);padding:0 12px;margin:16px 0 6px;}

/* Focus */
:focus-visible{outline:2px solid var(--g-600);outline-offset:2px;border-radius:6px;}

/* Deep-green hero surface (rationed - max one per page) */
.bc-hero-dark{background:linear-gradient(135deg,var(--g-900),var(--g-950));color:var(--n-0);border-radius:var(--radius-card);}
.bc-hero-dark .bc-metric,.bc-hero-dark .bc-metric-lg{color:var(--n-0);}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}