/* ============================================================
   Bluebell Design System — Theme Tokens
   Synced from Pencil designs · 2026-03-22
   ============================================================ */

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Raleway:wght@400;500;600;700&display=swap');

/* --- CSS Reset -------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Light Theme (default) -------------------------------- */
:root {
  /* Background & Surface */
  --bb-bg: #f5f8fa;
  --bb-surface: #ffffff;
  --bb-chrome: #f5f8fa;
  --bb-hover: #e9ecef;

  /* Sidebar */
  --bb-sidebar-bg: #2D619E;
  --bb-sidebar-text: #ffffff;
  --bb-sidebar-muted: rgba(255,255,255,0.67);
  --bb-sidebar-active-bg: rgba(255,255,255,0.08);
  --bb-sidebar-active-border: #75affa;

  /* Text */
  --bb-text: #222222;
  --bb-text-muted: #6c757d;
  --bb-text-secondary: #495057;

  /* Brand */
  --bb-primary: #137fec;
  --bb-accent: #00B0ED;
  --bb-accent-light: #75affa;

  /* Semantic */
  --bb-success: #22c55e;
  --bb-warning: #f59e0b;
  --bb-error: #ef4444;
  --bb-info: #3b82f6;

  /* Border & Shadow */
  --bb-border: #dee2e6;
  --bb-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --bb-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --bb-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Badge — Backlog */
  --bb-badge-backlog-bg: #e2e8f0;
  --bb-badge-backlog-text: #475569;
  /* Badge — Todo */
  --bb-badge-todo-bg: #dbeafe;
  --bb-badge-todo-text: #2563eb;
  /* Badge — In Progress */
  --bb-badge-progress-bg: #dcfce7;
  --bb-badge-progress-text: #16a34a;
  /* Badge — Done */
  --bb-badge-done-bg: #d1fae5;
  --bb-badge-done-text: #16a34a;
  /* Badge — High */
  --bb-badge-high-bg: #fee2e2;
  --bb-badge-high-text: #dc2626;
  /* Badge — Medium */
  --bb-badge-medium-bg: #fef3c7;
  --bb-badge-medium-text: #d97706;
  /* Badge — Low */
  --bb-badge-low-bg: #dcfce7;
  --bb-badge-low-text: #16a34a;

  /* Typography */
  --bb-font-heading: 'Raleway', sans-serif;
  --bb-font-body: 'Inter', system-ui, sans-serif;
  --bb-font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --bb-space-xs: 4px;
  --bb-space-sm: 8px;
  --bb-space-md: 16px;
  --bb-space-lg: 24px;
  --bb-space-xl: 32px;

  /* Radius */
  --bb-radius-sm: 4px;
  --bb-radius-md: 8px;
  --bb-radius-lg: 12px;
}

/* --- Dark Theme ------------------------------------------- */
.dark {
  /* Background & Surface */
  --bb-bg: #0f1117;
  --bb-surface: #161b22;
  --bb-chrome: #161b22;
  --bb-hover: #1c2129;

  /* Sidebar */
  --bb-sidebar-bg: #0a0c10;
  --bb-sidebar-text: #e1e4ed;
  --bb-sidebar-muted: #6b7280;

  /* Text */
  --bb-text: #e1e4ed;
  --bb-text-muted: #6b7280;
  --bb-text-secondary: #9ca3af;

  /* Border & Shadow */
  --bb-border: #2a2d3a;
  --bb-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --bb-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --bb-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  /* Badge — Backlog */
  --bb-badge-backlog-bg: #1e293b;
  --bb-badge-backlog-text: #94a3b8;
  /* Badge — Todo */
  --bb-badge-todo-bg: #172554;
  --bb-badge-todo-text: #93c5fd;
  /* Badge — In Progress */
  --bb-badge-progress-bg: #052e16;
  --bb-badge-progress-text: #86efac;
  /* Badge — Done */
  --bb-badge-done-bg: #052e16;
  --bb-badge-done-text: #4ade80;
  /* Badge — High */
  --bb-badge-high-bg: #450a0a;
  --bb-badge-high-text: #fca5a5;
  /* Badge — Medium */
  --bb-badge-medium-bg: #451a03;
  --bb-badge-medium-text: #fcd34d;
  /* Badge — Low */
  --bb-badge-low-bg: #052e16;
  --bb-badge-low-text: #86efac;
}

/* --- Scrollbar (dark, thin) ------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }

/* --- Base Layout ------------------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* --- Base Typography -------------------------------------- */
body {
  font-family: var(--bb-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bb-text);
  background-color: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--bb-text);
}

code, pre, kbd, samp {
  font-family: var(--bb-font-mono);
  font-size: 0.9em;
}