/* ==========================================================================
   theDiff — Design tokens
   Brand hue: Magenta / orchid (checked against the family color registry —
   UNIVERSAL_DESIGN_PLAYBOOK.md §3.1 — against theURL/amber, theJSON/indigo,
   theMilliseconds/brown, theApps/emerald, theRegex/electric-blue,
   quickPDFs/red, theEdito/cyan; orchid neighbors none of them).
     - Default (no class needed)  : "Orchid Nightshade" — deep plum-black
                                    chrome with a vivid fuchsia accent.
     - body.theme-light           : "Blossom Paper"      — soft warm-white
                                    chrome with a deep orchid ink.

   Diff semantics (additions/deletions/changes) are DELIBERATELY separate
   tokens from the brand accent — every diff tool's users already read
   green/red/amber as add/remove/change from git, and hijacking that with
   the brand color for novelty would hurt usability, not help branding.
   ========================================================================== */

:root {
  /* Chrome layers */
  --bg-page: #150f1a;
  --titlebar-bg: #1c1522;
  --toolbar-bg: #19121e;
  --pane-header-bg: #1c1522;
  --editor-bg: #17111c;
  --panel-bg: #19121e;
  --bg-elevated: #241a2b;
  --bg-overlay: rgba(10, 6, 14, 0.75);
  --statusbar-bg: #86198f;
  --statusbar-text: #fdf4ff;

  /* Brand accent (magenta / orchid) */
  --accent: #e879f9;
  --accent-hover: #f0abfc;
  --accent-ink: #f0abfc;
  --accent-ink-hover: #f5d0fe;
  --accent-dim: rgba(232, 121, 249, 0.14);
  --accent-contrast-text: #3b0764;

  /* Diff semantics */
  --add: #4ade80;
  --add-dim: rgba(74, 222, 128, 0.14);
  --remove: #fb7185;
  --remove-dim: rgba(251, 113, 133, 0.14);
  --change: #fbbf24;
  --change-dim: rgba(251, 191, 36, 0.14);

  /* Generic status (reused for non-diff messaging — errors, warnings) */
  --success: #4ade80;
  --success-dim: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-dim: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-dim: rgba(251, 113, 133, 0.14);

  /* Text */
  --text-1: #f3e8f7;
  --text-2: #a992ad;
  --text-3: #6b5a70;

  /* Borders / shadows */
  --border: #2e2236;
  --border-subtle: #251b2c;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* Inputs */
  --input-bg: #120d16;
  --input-border: var(--border);

  color-scheme: dark;
}

body.theme-light {
  --bg-page: #fdf6fb;
  --titlebar-bg: #ffffff;
  --toolbar-bg: #fbeefa;
  --pane-header-bg: #ffffff;
  --editor-bg: #ffffff;
  --panel-bg: #fbeefa;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(60, 20, 55, 0.35);
  --statusbar-bg: #a21caf;
  --statusbar-text: #fdf4ff;

  --accent: #a21caf;
  --accent-hover: #86198f;
  --accent-ink: #86198f;
  --accent-ink-hover: #701a75;
  --accent-dim: rgba(162, 28, 175, 0.1);
  --accent-contrast-text: #ffffff;

  --add: #15803d;
  --add-dim: rgba(21, 128, 61, 0.1);
  --remove: #be123c;
  --remove-dim: rgba(190, 18, 60, 0.1);
  --change: #a16207;
  --change-dim: rgba(161, 98, 7, 0.1);

  --success: #15803d;
  --success-dim: rgba(21, 128, 61, 0.1);
  --warning: #a16207;
  --warning-dim: rgba(161, 98, 7, 0.1);
  --danger: #be123c;
  --danger-dim: rgba(190, 18, 60, 0.1);

  --text-1: #2b1730;
  --text-2: #6b5570;
  --text-3: #967f9b;

  --border: #ecd9ea;
  --border-subtle: #f3e4f1;
  --shadow-sm: 0 2px 8px rgba(80, 30, 75, 0.1);
  --shadow-md: 0 8px 24px rgba(80, 30, 75, 0.14);
  --shadow-lg: 0 24px 60px rgba(80, 30, 75, 0.2);

  --input-bg: #ffffff;
  --input-border: var(--border);

  color-scheme: light;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden; /* the app shell owns the viewport; panels scroll inside */
  background: var(--bg-page);
  color: var(--text-1);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
}

button {
  font-family: inherit;
}

a {
  color: var(--accent-ink);
}

a:hover {
  color: var(--accent-ink-hover);
}

code, pre, .mono {
  font-family: "JetBrains Mono", "Consolas", monospace;
}

::selection {
  background: var(--accent-dim);
  color: var(--text-1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

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

/* ==========================================================================
   Scrollbar (thin)
   ========================================================================== */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}