/* za3 Data Browser — shared light/dark theme tokens */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #0f1117;
  --bg-page-alt: #0d0f18;
  --bg-panel: #13151f;
  --bg-secondary: #161924;
  --bg-elevated: #1a1d27;
  --bg-hover: #1e2235;
  --bg-hover-strong: #2a2f4a;
  --bg-input: #0f1117;
  --bg-active: #2a1f5a;
  --bg-selected: #1e1a3a;
  --bg-item: #161929;
  --border: #2d3148;
  --border-subtle: #1a1d27;
  --border-strong: #3d4266;
  --border-focus: #4d5588;
  --text: #e2e8f0;
  --text-heading: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;
  --text-faint: #334155;
  --text-placeholder: #374151;
  --text-body-soft: #cbd5e1;
  --text-content: #d1d5db;
  --accent: #a78bfa;
  --accent-strong: #7c3aed;
  --accent-hover: #8b5cf6;
  --accent-text: #ddd6fe;
  --accent-soft: #c084fc;
  --link: #60a5fa;
  --link-hover-bg: #2a2f4a;
  --btn-bg: #1e2235;
  --btn-border: #3d4266;
  --btn-primary-bg: #4c1d95;
  --btn-primary-border: #6d28d9;
  --btn-primary-hover: #5b21b6;
  --btn-primary-text: #ffffff;
  --green-bg: #14532d;
  --green-text: #86efac;
  --green-count-bg: #1e2a1e;
  --green-soft-bg: #1a2a1a;
  --blue-bg: #1e3a8a;
  --blue-text: #60a5fa;
  --purple-bg: #4c1d95;
  --purple-text: #d8b4fe;
  --purple-light: #ede9fe;
  --tag-bg: #1e1a3a;
  --tag-text: #c084fc;
  --error-text: #f87171;
  --error-bg: #1f1010;
  --error-border: #7f1d1d;
  --error-soft: rgba(127, 29, 29, 0.2);
  --warning-bg: #3d3a00;
  --warning-text: #eab308;
  --deleted-bg: #5d1d1d;
  --deleted-text: #fca5a5;
  --mark-bg: rgba(124, 58, 237, 0.27);
  --mark-text: #e9d5ff;
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow: rgba(0, 0, 0, 0.6);
  --scrollbar: #2d3148;
  --scrollbar-hover: #4d5588;
  --syntax-key: #60a5fa;
  --syntax-string: #86efac;
  --syntax-number: #fbbf24;
  --syntax-bool: #f472b6;
  --syntax-null: #94a3b8;
  --md-heading: #a78bfa;
  --code-bg: #1e2235;
  --bubble-admin-bg: #5b21b6;
  --bubble-admin-text: #f3e8ff;
  --bubble-user-bg: #1e2235;
  --avatar-lightness: 45%;
  --ref-flash-color: #8ab4f8;
  --ref-flash-glow: rgba(138, 180, 248, 0.55);
  --ref-flash-bg: rgba(138, 180, 248, 0.14);
  --hit-hover-bg: #171a28;
  --gcs-badge-bg: #1e2235;
  --gcs-badge-text: #475569;
  --header-bg: #1a1d27;
  --header-title: #a78bfa;
  --nav-link-bg-hover: #2a2f4a;
  --spinner-track: #3d4266;
  --cell-null: #374151;
  --white: #ffffff;

  /* Viewer tokens */
  --viewer-bg: var(--bg-page);
  --viewer-panel: var(--bg-elevated);
  --viewer-border: var(--border);
  --viewer-text: var(--text);
  --viewer-text-muted: var(--text-muted);
  --viewer-hover: var(--bg-hover);

  --viewer-gmail-bg: #1f1f1f;
  --viewer-gmail-panel: #1f1f1f;
  --viewer-gmail-border: #3c4043;
  --viewer-gmail-hover: #2d2d2d;
  --viewer-gmail-text: #e8eaed;
  --viewer-gmail-muted: #9aa0a6;
  --viewer-gmail-badge: #5f6368;

  --viewer-takeout-bg: #202124;
  --viewer-takeout-panel: #292a2d;
  --viewer-takeout-border: #3c4043;
  --viewer-takeout-text: #e8eaed;
  --viewer-takeout-muted: #9aa0a6;
  --viewer-takeout-bubble: #292a2d;
  --viewer-takeout-accent: #8ab4f8;

  --viewer-github-bg: #0d1117;
  --viewer-github-panel: #161b22;
  --viewer-github-border: #30363d;
  --viewer-github-text: #e6edf3;
  --viewer-github-muted: #8b949e;
  --viewer-github-dim: #6e7681;
  --viewer-github-code-bg: #0d1117;
  --viewer-github-syntax-string: #79c0ff;
  --viewer-github-syntax-keyword: #ff7b72;
  --viewer-github-syntax-function: #d2a8ff;
  --viewer-github-syntax-comment: #8b949e;

  --viewer-figma-bg: #2c2c2c;
  --viewer-figma-border: #3e3e3e;
  --viewer-figma-text: #ffffff;
  --viewer-figma-muted: #b3b3b3;
  --viewer-figma-accent: #7b61ff;
  --viewer-figma-panel: #333333;
  --viewer-figma-code-bg: #1a1a1a;
  --viewer-figma-btn-hover: #6a52d5;
  --viewer-figma-btn-active: #5a42c5;
  --viewer-figma-secondary-hover: #4a4a4a;
  --viewer-figma-note-text: #d0d0d0;
  --viewer-figma-json-string: #7dd3fc;
  --viewer-figma-json-number: #86efac;
  --viewer-figma-json-bool: #fca5a5;
  --viewer-figma-json-null: #d1d5db;

  /* Jira renderer */
  --jira-bg-primary: #0f1117;
  --jira-bg-secondary: #161924;
  --jira-bg-tertiary: #1a1d27;
  --jira-accent-primary: #a78bfa;
  --jira-text-primary: #e6edf3;
  --jira-text-secondary: #8b949e;
  --jira-text-tertiary: #6e7681;
  --jira-border-color: #30363d;
  --jira-hover-bg: #272b33;
  --jira-toggle-bg: #2a1f5a;
  --jira-toggle-hover: #3d2970;
  --jira-toggle-active: #1f1340;

  /* Slack renderer */
  --slack-bg: #0f1117;
  --slack-panel: #1a1d27;
  --slack-hover: #1e2235;
  --slack-border: #2d3148;
  --slack-text: #e2e8f0;
  --slack-muted: #64748b;
  --slack-dim: #475569;
  --slack-accent: #a78bfa;
  --slack-reaction-bg: #1e2235;
  --slack-thread-bg: #13151f;
  --slack-code-bg: #0d0f18;
  --slack-quote-border: #7c3aed;
  --slack-avatar-lightness: 45%;
}

[data-theme="light"] {
  color-scheme: light;

  --bg-page: #f8fafc;
  --bg-page-alt: #f1f5f9;
  --bg-panel: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-hover-strong: #e2e8f0;
  --bg-input: #ffffff;
  --bg-active: #ede9fe;
  --bg-selected: #f5f3ff;
  --bg-item: #ffffff;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;
  --border-focus: #a78bfa;
  --text: #1e293b;
  --text-heading: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-faint: #cbd5e1;
  --text-placeholder: #94a3b8;
  --text-body-soft: #334155;
  --text-content: #334155;
  --accent: #6d28d9;
  --accent-strong: #7c3aed;
  --accent-hover: #8b5cf6;
  --accent-text: #5b21b6;
  --accent-soft: #7c3aed;
  --link: #2563eb;
  --link-hover-bg: #eff6ff;
  --btn-bg: #ffffff;
  --btn-border: #cbd5e1;
  --btn-primary-bg: #7c3aed;
  --btn-primary-border: #6d28d9;
  --btn-primary-hover: #6d28d9;
  --btn-primary-text: #ffffff;
  --green-bg: #dcfce7;
  --green-text: #15803d;
  --green-count-bg: #ecfdf5;
  --green-soft-bg: #ecfdf5;
  --blue-bg: #dbeafe;
  --blue-text: #1d4ed8;
  --purple-bg: #ede9fe;
  --purple-text: #6d28d9;
  --purple-light: #f5f3ff;
  --tag-bg: #f5f3ff;
  --tag-text: #6d28d9;
  --error-text: #dc2626;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-soft: rgba(254, 202, 202, 0.5);
  --warning-bg: #fef9c3;
  --warning-text: #a16207;
  --deleted-bg: #fee2e2;
  --deleted-text: #dc2626;
  --mark-bg: rgba(124, 58, 237, 0.18);
  --mark-text: #5b21b6;
  --overlay: rgba(15, 23, 42, 0.35);
  --shadow: rgba(15, 23, 42, 0.15);
  --scrollbar: #cbd5e1;
  --scrollbar-hover: #94a3b8;
  --syntax-key: #2563eb;
  --syntax-string: #15803d;
  --syntax-number: #b45309;
  --syntax-bool: #be185d;
  --syntax-null: #64748b;
  --md-heading: #6d28d9;
  --code-bg: #f1f5f9;
  --bubble-admin-bg: #7c3aed;
  --bubble-admin-text: #ffffff;
  --bubble-user-bg: #f1f5f9;
  --avatar-lightness: 38%;
  --ref-flash-color: #2563eb;
  --ref-flash-glow: rgba(37, 99, 235, 0.35);
  --ref-flash-bg: rgba(37, 99, 235, 0.1);
  --hit-hover-bg: #f8fafc;
  --gcs-badge-bg: #f1f5f9;
  --gcs-badge-text: #64748b;
  --header-bg: #ffffff;
  --header-title: #6d28d9;
  --nav-link-bg-hover: #f1f5f9;
  --spinner-track: #e2e8f0;
  --cell-null: #cbd5e1;
  --white: #ffffff;

  --viewer-bg: var(--bg-page);
  --viewer-panel: var(--bg-panel);
  --viewer-border: var(--border);
  --viewer-text: var(--text);
  --viewer-text-muted: var(--text-muted);
  --viewer-hover: var(--bg-hover);

  --viewer-gmail-bg: #ffffff;
  --viewer-gmail-panel: #ffffff;
  --viewer-gmail-border: #e2e8f0;
  --viewer-gmail-hover: #f8fafc;
  --viewer-gmail-text: #202124;
  --viewer-gmail-muted: #5f6368;
  --viewer-gmail-badge: #dadce0;

  --viewer-takeout-bg: #ffffff;
  --viewer-takeout-panel: #f8f9fa;
  --viewer-takeout-border: #dadce0;
  --viewer-takeout-text: #202124;
  --viewer-takeout-muted: #5f6368;
  --viewer-takeout-bubble: #f1f3f4;
  --viewer-takeout-accent: #1a73e8;

  --viewer-github-bg: #ffffff;
  --viewer-github-panel: #f6f8fa;
  --viewer-github-border: #d0d7de;
  --viewer-github-text: #1f2328;
  --viewer-github-muted: #656d76;
  --viewer-github-dim: #8c959f;
  --viewer-github-code-bg: #ffffff;
  --viewer-github-syntax-string: #0550ae;
  --viewer-github-syntax-keyword: #cf222e;
  --viewer-github-syntax-function: #8250df;
  --viewer-github-syntax-comment: #656d76;

  --viewer-figma-bg: #ffffff;
  --viewer-figma-border: #e5e5e5;
  --viewer-figma-text: #1e1e1e;
  --viewer-figma-muted: #666666;
  --viewer-figma-accent: #7b61ff;
  --viewer-figma-panel: #f1f5f9;
  --viewer-figma-code-bg: #f8fafc;
  --viewer-figma-btn-hover: #6a52d5;
  --viewer-figma-btn-active: #5a42c5;
  --viewer-figma-secondary-hover: #e2e8f0;
  --viewer-figma-note-text: #475569;
  --viewer-figma-json-string: #2563eb;
  --viewer-figma-json-number: #15803d;
  --viewer-figma-json-bool: #dc2626;
  --viewer-figma-json-null: #64748b;

  --jira-bg-primary: #ffffff;
  --jira-bg-secondary: #f8fafc;
  --jira-bg-tertiary: #f1f5f9;
  --jira-accent-primary: #6d28d9;
  --jira-text-primary: #1e293b;
  --jira-text-secondary: #475569;
  --jira-text-tertiary: #64748b;
  --jira-border-color: #e2e8f0;
  --jira-hover-bg: #f1f5f9;
  --jira-toggle-bg: #ede9fe;
  --jira-toggle-hover: #ddd6fe;
  --jira-toggle-active: #c4b5fd;

  --slack-bg: #ffffff;
  --slack-panel: #f8fafc;
  --slack-hover: #f1f5f9;
  --slack-border: #e2e8f0;
  --slack-text: #1e293b;
  --slack-muted: #64748b;
  --slack-dim: #94a3b8;
  --slack-accent: #6d28d9;
  --slack-reaction-bg: #f1f5f9;
  --slack-thread-bg: #f8fafc;
  --slack-code-bg: #f1f5f9;
  --slack-quote-border: #7c3aed;
  --slack-avatar-lightness: 38%;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-focus);
}
.theme-toggle .theme-icon-light { display: none; }
.theme-toggle .theme-icon-dark { display: inline; }
[data-theme="light"] .theme-toggle .theme-icon-light { display: inline; }
[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }