/* ==========================================================================
   theEditor — Design tokens
   Two named chrome themes sharing one brand hue (cyan/aqua):
     - Default (no class needed)  : "Aqua Midnight" — deep blue-black IDE
                                    chrome with glowing cyan accents.
     - body.theme-light           : "Aqua Paper"    — cool paper-white chrome
                                    with deep teal ink.
   The chrome theme is driven by the editor-theme picker (Monaco theme and
   app chrome always switch together — see static/js/monaco-setup.js).

   Every color used anywhere in this project MUST be one of the tokens below
   (docs/UNIVERSAL_DESIGN_PLAYBOOK.md §3). The layout deliberately reads as
   an IDE (activity bar / sidebar / tabs / editor / status bar), not as the
   family's usual "card on a page" — but the token system, naming and
   accessibility rules are the same as every sibling site.

   Two-tier accent: --accent is the fill (pairs with --accent-contrast-text);
   --accent-ink is the hue tuned to sit as text/icons on the chrome.
   ========================================================================== */

:root {
  /* Chrome layers (VS Code-style: each panel its own surface) */
  --bg-page: #0d1319;
  --titlebar-bg: #10171e;
  --activity-bg: #0a0f15;
  --sidebar-bg: #101820;
  --tabsbar-bg: #0d141b;
  --tab-bg: #101820;
  --tab-active-bg: #121c26;
  --editor-bg: #121c26;      /* must match the custom Monaco theme bg */
  --panel-bg: #101820;
  --bg-elevated: #182430;
  --bg-overlay: rgba(3, 8, 12, 0.75);

  /* Brand accent (cyan/aqua) */
  --accent: #2dd4ec;
  --accent-hover: #5ce2f5;
  --accent-ink: #67e8f9;
  --accent-ink-hover: #9deffc;
  --accent-dim: rgba(45, 212, 236, 0.13);
  --accent-contrast-text: #052730;

  /* Status bar — brand-colored like VS Code's */
  --statusbar-bg: #0e7490;
  --statusbar-text: #eafcff;

  /* Semantic status */
  --success: #4ade80;
  --success-dim: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-dim: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.14);

  /* File-type icon tints (explorer) */
  --ft-js: #f5d76a;
  --ft-css: #6ab7f5;
  --ft-html: #f58c6a;
  --ft-md: #9dc7f0;
  --ft-img: #b48af7;
  --ft-json: #f5d76a;

  /* Text */
  --text-1: #dbe9f2;
  --text-2: #93a7b5;
  --text-3: #5c707e;

  /* Borders / shadows */
  --border: #1f2e3c;
  --border-subtle: #17232e;
  --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: #0b1117;
  --input-border: var(--border);

  color-scheme: dark;
}

body.theme-light {
  --bg-page: #eef4f6;
  --titlebar-bg: #f7fbfc;
  --activity-bg: #e2ecef;
  --sidebar-bg: #f2f7f9;
  --tabsbar-bg: #e8f0f2;
  --tab-bg: #eef4f6;
  --tab-active-bg: #fdfefe;
  --editor-bg: #fdfefe;
  --panel-bg: #f2f7f9;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(20, 45, 55, 0.35);

  --accent: #0891b2;
  --accent-hover: #0e7490;
  --accent-ink: #0e7490;
  --accent-ink-hover: #155e75;
  --accent-dim: rgba(8, 145, 178, 0.1);
  --accent-contrast-text: #ffffff;

  --statusbar-bg: #0e7490;
  --statusbar-text: #eafcff;

  --success: #15803d;
  --success-dim: rgba(21, 128, 61, 0.1);
  --warning: #a16207;
  --warning-dim: rgba(161, 98, 7, 0.1);
  --danger: #b91c1c;
  --danger-dim: rgba(185, 28, 28, 0.1);

  --ft-js: #a07d00;
  --ft-css: #1d6fa5;
  --ft-html: #b3502a;
  --ft-md: #33648f;
  --ft-img: #6e4fd1;
  --ft-json: #a07d00;

  --text-1: #16262f;
  --text-2: #48606d;
  --text-3: #7d919c;

  --border: #d3e1e6;
  --border-subtle: #e1ebee;
  --shadow-sm: 0 2px 8px rgba(30, 60, 75, 0.1);
  --shadow-md: 0 8px 24px rgba(30, 60, 75, 0.14);
  --shadow-lg: 0 24px 60px rgba(30, 60, 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 IDE 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, IDE-style)
   ========================================================================== */

::-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);
}

/* ==========================================================================
   Accent color-contrast variants — same two chrome bases (Aqua Midnight /
   Aqua Paper), a different brand hue layered on top. Cyan (no class) is the
   default; each variant re-derives --accent/--accent-ink/--accent-dim/
   --accent-contrast-text/--statusbar-bg for BOTH bases so contrast stays
   correct in dark and light alike (playbook §3, applied per-hue instead of
   per-site here).
   ========================================================================== */

body.accent-red {
  --accent: #f5484d; --accent-hover: #ff6a6e; --accent-ink: #ff7075; --accent-ink-hover: #ff9296;
  --accent-dim: rgba(245, 72, 77, 0.15); --accent-contrast-text: #2a0506; --statusbar-bg: #b91c1c;
}
body.theme-light.accent-red {
  --accent: #dc2626; --accent-hover: #b91c1c; --accent-ink: #b91c1c; --accent-ink-hover: #991b1b;
  --accent-dim: rgba(220, 38, 38, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #b91c1c;
}

body.accent-purple {
  --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-ink: #c4b5fd; --accent-ink-hover: #ddd6fe;
  --accent-dim: rgba(167, 139, 250, 0.15); --accent-contrast-text: #211235; --statusbar-bg: #6d28d9;
}
body.theme-light.accent-purple {
  --accent: #7c3aed; --accent-hover: #6d28d9; --accent-ink: #6d28d9; --accent-ink-hover: #5b21b6;
  --accent-dim: rgba(124, 58, 237, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #6d28d9;
}

body.accent-pink {
  --accent: #f472b6; --accent-hover: #f9a8d4; --accent-ink: #f9a8d4; --accent-ink-hover: #fbcfe8;
  --accent-dim: rgba(244, 114, 182, 0.15); --accent-contrast-text: #3b0a24; --statusbar-bg: #be185d;
}
body.theme-light.accent-pink {
  --accent: #db2777; --accent-hover: #be185d; --accent-ink: #be185d; --accent-ink-hover: #9d174d;
  --accent-dim: rgba(219, 39, 119, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #be185d;
}

body.accent-amber {
  --accent: #fbbf24; --accent-hover: #fcd34d; --accent-ink: #fcd34d; --accent-ink-hover: #fde68a;
  --accent-dim: rgba(251, 191, 36, 0.15); --accent-contrast-text: #3a2a02; --statusbar-bg: #92400e;
}
body.theme-light.accent-amber {
  --accent: #b45309; --accent-hover: #92400e; --accent-ink: #92400e; --accent-ink-hover: #78350f;
  --accent-dim: rgba(180, 83, 9, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #92400e;
}

body.accent-green {
  --accent: #4ade80; --accent-hover: #86efac; --accent-ink: #86efac; --accent-ink-hover: #bbf7d0;
  --accent-dim: rgba(74, 222, 128, 0.15); --accent-contrast-text: #052e13; --statusbar-bg: #15803d;
}
body.theme-light.accent-green {
  --accent: #16a34a; --accent-hover: #15803d; --accent-ink: #15803d; --accent-ink-hover: #166534;
  --accent-dim: rgba(22, 163, 74, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #15803d;
}

/* Cyan (default) restated explicitly so the swatch/menu can read one
   consistent set of hues regardless of which class (if any) is active. */
body.accent-cyan { --accent: #2dd4ec; --accent-hover: #5ce2f5; --accent-ink: #67e8f9; --accent-ink-hover: #9deffc; --accent-dim: rgba(45, 212, 236, 0.13); --accent-contrast-text: #052730; --statusbar-bg: #0e7490; }
body.theme-light.accent-cyan { --accent: #0891b2; --accent-hover: #0e7490; --accent-ink: #0e7490; --accent-ink-hover: #155e75; --accent-dim: rgba(8, 145, 178, 0.1); --accent-contrast-text: #ffffff; --statusbar-bg: #0e7490; }