/* ── CSS Custom Properties (Design Tokens) ─────────────── */
:root {
  /* Light theme (default) */
  --bg-body: #e8ecf1;
  --bg-toolbar: #ffffff;
  --bg-toolbar-hover: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --bg-input: #f0f2f5;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-search: #ffffff;
  --bg-dropdown: #ffffff;

  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --text-toolbar: #2c3e50;
  --text-toolbar-muted: #6c757d;
  --text-link: #3498db;
  --text-on-accent: #ffffff;

  --accent: #3498db;
  --accent-hover: #2980b9;
  --accent-light: rgba(52, 152, 219, 0.1);
  --danger: #e74c3c;
  --danger-hover: #c0392b;
  --success: #27ae60;
  --warning: #f39c12;

  --border: #dee2e6;
  --border-light: #e9ecef;
  --border-toolbar: rgba(0, 0, 0, 0.08);

  --tab-active-bg: rgba(52, 152, 219, 0.1);
  --tab-active-color: #3498db;
  --tab-action-hover: rgba(0, 0, 0, 0.07);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 50%;

  --toolbar-height: 52px;
  --search-height: 56px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Widget size tokens */
  --bm-icon-xs: 16px;
  --bm-icon-sm: 24px;
  --bm-icon-md: 32px;
  --bm-icon-lg: 48px;
  --bm-icon-xl: 64px;
  --bm-font-xs: 11px;
  --bm-font-sm: 12px;
  --bm-font-md: 14px;
  --bm-font-lg: 16px;
  --bm-font-xl: 18px;

  /* Bookmark radius token (overridden per widget via class) */
  --bm-radius: 0px;

  /* Widget card radius token */
  --widget-radius: var(--radius-md);
}

/* Dark theme — VS Code palette */
[data-theme="dark"] {
  --bg-body: #1e1e1e;
  --bg-toolbar: #252526;
  --bg-toolbar-hover: #2a2d2e;
  --bg-card: #252526;
  --bg-card-hover: #2d2d2d;
  --bg-input: #3c3c3c;
  --bg-search: #252526;
  --bg-dropdown: #252526;

  --text-primary: #cccccc;
  --text-secondary: #858585;
  --text-toolbar: #cccccc;
  --text-toolbar-muted: #858585;
  --text-link: #4fc1ff;
  --text-on-accent: #ffffff;

  --accent: #0e639c;
  --accent-hover: #1177bb;
  --accent-light: rgba(14, 99, 156, 0.2);
  --danger: #f48771;
  --danger-hover: #e06c75;
  --success: #4ec9b0;
  --warning: #dcdcaa;

  --border: #454545;
  --border-light: #3e3e42;
  --border-toolbar: rgba(255, 255, 255, 0.08);

  --tab-active-bg: rgba(255, 255, 255, 0.1);
  --tab-active-color: var(--text-toolbar);
  --tab-action-hover: rgba(255, 255, 255, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
}