/* DAL IDE — High contrast dark theme (frontend_todo_app style) */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Share+Tech+Mono&display=swap');

:root {
  --primary: #00f5ff;
  --primary-strong: #00c8d4;
  --primary-glow: rgba(0, 245, 255, 0.5);
  --secondary: #ff4d6a;
  --secondary-glow: rgba(255, 77, 106, 0.45);
  --tertiary: #b366ff;
  --tertiary-glow: rgba(179, 102, 255, 0.4);
  --contrast-accent: var(--secondary);
  --chroma-surface: rgba(18, 18, 28, 0.92);
  --chroma-surface-strong: rgba(28, 28, 42, 0.95);
  --success: #39ff14;
  --danger: #ff3366;
  --warning: #ffaa00;
  --discoball: #e0e8ff;
  --brain: #b366ff;
  --bg: #0a0a12;
  --card-bg: rgba(18, 18, 28, 0.85);
  --card-border: rgba(0, 245, 255, 0.2);
  --text: #e8ecff;
  --text-muted: #8892b0;
  --shadow: 0 0 30px rgba(0, 245, 255, 0.1);
  /* Fonts: Google Fonts when online; system fallbacks for fully local/offline use */
  --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', 'SF Mono', 'Consolas', 'Monaco', monospace;
}

/* Light theme palette: white, black, red, blue, green only. */
html[data-theme="light"] {
  color-scheme: light;
  --primary: #0000ff;
  --primary-strong: #0000ff;
  --primary-glow: rgba(0, 0, 255, 0.25);
  --secondary: #047857;
  --secondary-glow: rgba(4, 120, 87, 0.28);
  --tertiary: #6d28d9;
  --tertiary-glow: rgba(109, 40, 217, 0.2);
  --contrast-accent: var(--secondary);
  --chroma-surface: #eef2ff;
  --chroma-surface-strong: #dce7ff;
  --success: #008000;
  --danger: #cc0000;
  --warning: #cc0000;
  --discoball: #ffffff;
  --brain: #0000ff;
  --bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.28);
  --text: #000000;
  --text-muted: rgba(0, 0, 0, 0.62);
  --shadow: 0 0 18px rgba(0, 0, 0, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Disable the trackpad swipe-to-navigate gesture. The IDE is a router-less SPA;
   a two-finger horizontal swipe (incl. swipes that bubble up from the embedded
   browser iframe) would otherwise navigate top-level history away from the app,
   freezing the command bar and hiding the main view tabs. */
html {
  overscroll-behavior: none;
}

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(255, 77, 106, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 245, 255, 0.05) 0%, transparent 45%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(179, 102, 255, 0.03) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a12 0%, #0d0d18 50%, #0a0a12 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0, 0, 255, 0.06) 0%, transparent 52%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 128, 0, 0.06) 0%, transparent 48%),
    radial-gradient(ellipse 70% 45% at 50% 90%, rgba(109, 40, 217, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

html[data-theme="light"] .ide-header button.primary,
html[data-theme="light"] .ide-command-bar button.primary,
html[data-theme="light"] .welcome-btn.primary,
html[data-theme="light"] .file-modal-new-file-create.primary,
html[data-theme="light"] .provider-modal-footer button.primary {
  color: #ffffff;
}

/* =========================================================================
   COLORWAYS — accent palettes layered on top of the dark/light base mode.
   Each colorway defines primary, secondary, tertiary, and tinted chrome
   surfaces (--chroma-surface / --chroma-surface-strong) for bars and controls.
   "aurora" is the default (no data-colorway attribute). Names are shared with
   the DAL COO console so the two surfaces match.
   ========================================================================= */

/* ----- EMBER (warm orange / red) ----- */
html:not([data-theme="light"])[data-colorway="ember"] {
  --primary: #ff8a3d;
  --primary-strong: #ff6a1a;
  --primary-glow: rgba(255, 138, 61, 0.5);
  --secondary: #22d3ee;
  --secondary-glow: rgba(34, 211, 238, 0.45);
  --tertiary: #ff3366;
  --tertiary-glow: rgba(255, 51, 102, 0.4);
  --contrast-accent: var(--secondary);
  --brain: #ffb066;
  --chroma-surface: rgba(28, 16, 10, 0.94);
  --chroma-surface-strong: rgba(40, 22, 12, 0.96);
  --shadow: 0 0 30px rgba(255, 138, 61, 0.12);
}
html[data-theme="light"][data-colorway="ember"] {
  --primary: #d9531a;
  --primary-strong: #b8410f;
  --primary-glow: rgba(217, 83, 26, 0.25);
  --secondary: #0e7490;
  --secondary-glow: rgba(14, 116, 144, 0.28);
  --tertiary: #be123c;
  --tertiary-glow: rgba(190, 18, 60, 0.22);
  --contrast-accent: var(--secondary);
  --brain: #d9531a;
  --chroma-surface: #fff1e8;
  --chroma-surface-strong: #ffd9c2;
}

/* ----- EMERALD (green / teal) ----- */
html:not([data-theme="light"])[data-colorway="emerald"] {
  --primary: #2ee6a6;
  --primary-strong: #14c08a;
  --primary-glow: rgba(46, 230, 166, 0.5);
  --secondary: #f472b6;
  --secondary-glow: rgba(244, 114, 182, 0.45);
  --tertiary: #5eead4;
  --tertiary-glow: rgba(94, 234, 212, 0.4);
  --contrast-accent: var(--secondary);
  --brain: #7ee787;
  --chroma-surface: rgba(10, 24, 18, 0.94);
  --chroma-surface-strong: rgba(14, 32, 24, 0.96);
  --shadow: 0 0 30px rgba(46, 230, 166, 0.12);
}
html[data-theme="light"][data-colorway="emerald"] {
  --primary: #0f9d6b;
  --primary-strong: #0c7e56;
  --primary-glow: rgba(15, 157, 107, 0.25);
  --secondary: #be185d;
  --secondary-glow: rgba(190, 24, 93, 0.26);
  --tertiary: #0e7490;
  --tertiary-glow: rgba(14, 116, 144, 0.22);
  --contrast-accent: var(--secondary);
  --brain: #0f9d6b;
  --chroma-surface: #e8faf2;
  --chroma-surface-strong: #ccf3e3;
}

/* ----- VIOLET (purple / magenta) ----- */
html:not([data-theme="light"])[data-colorway="violet"] {
  --primary: #b794ff;
  --primary-strong: #9a6bff;
  --primary-glow: rgba(183, 148, 255, 0.5);
  --secondary: #fbbf24;
  --secondary-glow: rgba(251, 191, 36, 0.45);
  --tertiary: #ff5cf0;
  --tertiary-glow: rgba(255, 92, 240, 0.4);
  --contrast-accent: var(--secondary);
  --brain: #c9a3ff;
  --chroma-surface: rgba(20, 12, 28, 0.94);
  --chroma-surface-strong: rgba(28, 16, 38, 0.96);
  --shadow: 0 0 30px rgba(183, 148, 255, 0.12);
}
html[data-theme="light"][data-colorway="violet"] {
  --primary: #6d3df5;
  --primary-strong: #5a29e0;
  --primary-glow: rgba(109, 61, 245, 0.25);
  --secondary: #b45309;
  --secondary-glow: rgba(180, 83, 9, 0.28);
  --tertiary: #a21caf;
  --tertiary-glow: rgba(162, 28, 175, 0.22);
  --contrast-accent: var(--secondary);
  --brain: #6d3df5;
  --chroma-surface: #f3edff;
  --chroma-surface-strong: #e4d6ff;
}

/* ----- ROSE (pink / crimson) ----- */
html:not([data-theme="light"])[data-colorway="rose"] {
  --primary: #ff5d8f;
  --primary-strong: #ff3d77;
  --primary-glow: rgba(255, 93, 143, 0.5);
  --secondary: #2dd4bf;
  --secondary-glow: rgba(45, 212, 191, 0.45);
  --tertiary: #ffa3c2;
  --tertiary-glow: rgba(255, 163, 194, 0.4);
  --contrast-accent: var(--secondary);
  --brain: #ff8fb3;
  --chroma-surface: rgba(28, 10, 18, 0.94);
  --chroma-surface-strong: rgba(38, 14, 24, 0.96);
  --shadow: 0 0 30px rgba(255, 93, 143, 0.12);
}
html[data-theme="light"][data-colorway="rose"] {
  --primary: #d61f5c;
  --primary-strong: #b91450;
  --primary-glow: rgba(214, 31, 92, 0.25);
  --secondary: #0d9488;
  --secondary-glow: rgba(13, 148, 136, 0.28);
  --tertiary: #be123c;
  --tertiary-glow: rgba(190, 18, 60, 0.22);
  --contrast-accent: var(--secondary);
  --brain: #d61f5c;
  --chroma-surface: #ffeef4;
  --chroma-surface-strong: #ffd6e5;
}

/* ----- SOLAR (gold / amber) ----- */
html:not([data-theme="light"])[data-colorway="solar"] {
  --primary: #ffc94d;
  --primary-strong: #ffb700;
  --primary-glow: rgba(255, 201, 77, 0.5);
  --secondary: #818cf8;
  --secondary-glow: rgba(129, 140, 248, 0.45);
  --tertiary: #ff8a3d;
  --tertiary-glow: rgba(255, 138, 61, 0.4);
  --contrast-accent: var(--secondary);
  --brain: #ffe08a;
  --chroma-surface: rgba(24, 18, 8, 0.94);
  --chroma-surface-strong: rgba(34, 26, 10, 0.96);
  --shadow: 0 0 30px rgba(255, 201, 77, 0.12);
}
html[data-theme="light"][data-colorway="solar"] {
  --primary: #a86b00;
  --primary-strong: #8a5800;
  --primary-glow: rgba(168, 107, 0, 0.25);
  --secondary: #4338ca;
  --secondary-glow: rgba(67, 56, 202, 0.28);
  --tertiary: #b45309;
  --tertiary-glow: rgba(180, 83, 9, 0.22);
  --contrast-accent: var(--secondary);
  --brain: #a86b00;
  --chroma-surface: #fff8e8;
  --chroma-surface-strong: #ffefc2;
}

/* ----- LIBERTY (premium red / white / blue) ----- */
html:not([data-theme="light"])[data-colorway="liberty"] {
  --primary: #3b82f6;
  --primary-strong: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.55);
  --secondary: #ef4444;
  --secondary-glow: rgba(239, 68, 68, 0.5);
  --tertiary: #f8fafc;
  --tertiary-glow: rgba(248, 250, 252, 0.35);
  --contrast-accent: var(--secondary);
  --brain: #93c5fd;
  --chroma-surface: rgba(8, 14, 32, 0.94);
  --chroma-surface-strong: rgba(12, 20, 44, 0.96);
  --shadow: 0 0 36px rgba(59, 130, 246, 0.14), 0 0 64px rgba(239, 68, 68, 0.06);
  --card-border: rgba(59, 130, 246, 0.28);
}
html[data-theme="light"][data-colorway="liberty"] {
  --primary: #002868;
  --primary-strong: #001a45;
  --primary-glow: rgba(0, 40, 104, 0.3);
  --secondary: #bf0a30;
  --secondary-glow: rgba(191, 10, 48, 0.28);
  --tertiary: #ffffff;
  --tertiary-glow: rgba(0, 40, 104, 0.12);
  --contrast-accent: var(--secondary);
  --brain: #002868;
  --chroma-surface: #f0f4ff;
  --chroma-surface-strong: #dce6ff;
  --card-border: rgba(0, 40, 104, 0.22);
}

/* Liberty premium atmosphere — star field + patriotic light washes */
html[data-colorway="liberty"] body::before {
  background:
    radial-gradient(ellipse 90% 55% at 15% 8%, rgba(59, 130, 246, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 88% 12%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(248, 250, 252, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 72% 68%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #060b1a 0%, #0a1028 50%, #060b1a 100%);
  animation: liberty-glow 14s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="liberty"] body::before {
  background:
    radial-gradient(ellipse 85% 50% at 12% 10%, rgba(0, 40, 104, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 65% 40% at 90% 15%, rgba(191, 10, 48, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 50% 95%, rgba(0, 40, 104, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 50%, #ffffff 100%);
}
html[data-colorway="liberty"] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(248, 250, 252, 0.95), transparent),
    radial-gradient(1px 1px at 22% 62%, rgba(248, 250, 252, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 38% 28%, rgba(248, 250, 252, 0.9), transparent),
    radial-gradient(1px 1px at 52% 78%, rgba(248, 250, 252, 0.65), transparent),
    radial-gradient(2px 2px at 66% 14%, rgba(248, 250, 252, 1), transparent),
    radial-gradient(1px 1px at 74% 48%, rgba(248, 250, 252, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 86% 32%, rgba(248, 250, 252, 0.85), transparent),
    radial-gradient(1px 1px at 94% 72%, rgba(248, 250, 252, 0.6), transparent),
    radial-gradient(1px 1px at 14% 88%, rgba(248, 250, 252, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 46% 42%, rgba(248, 250, 252, 0.8), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(248, 250, 252, 0.7), transparent),
    radial-gradient(2px 2px at 32% 92%, rgba(248, 250, 252, 0.95), transparent);
  background-size: 100% 100%;
  animation: liberty-twinkle 10s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="liberty"] body::after {
  opacity: 0.28;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(0, 40, 104, 0.55), transparent),
    radial-gradient(1px 1px at 28% 58%, rgba(191, 10, 48, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 44% 32%, rgba(0, 40, 104, 0.5), transparent),
    radial-gradient(1px 1px at 62% 74%, rgba(191, 10, 48, 0.4), transparent),
    radial-gradient(2px 2px at 78% 18%, rgba(0, 40, 104, 0.6), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(191, 10, 48, 0.42), transparent),
    radial-gradient(1.5px 1.5px at 18% 84%, rgba(0, 40, 104, 0.48), transparent),
    radial-gradient(1px 1px at 54% 46%, rgba(191, 10, 48, 0.38), transparent);
}
html[data-colorway="liberty"] #app {
  position: relative;
  z-index: 1;
}
html[data-colorway="liberty"] .colorway-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ef4444 0%, #ef4444 33%, #f8fafc 33%, #f8fafc 66%, #3b82f6 66%);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.45), 0 0 10px rgba(239, 68, 68, 0.25);
  opacity: 0.85;
}
html[data-theme="light"][data-colorway="liberty"] .colorway-dot {
  background: linear-gradient(135deg, #bf0a30 0%, #bf0a30 33%, #ffffff 33%, #ffffff 66%, #002868 66%);
  box-shadow: 0 0 6px rgba(0, 40, 104, 0.35), 0 0 10px rgba(191, 10, 48, 0.2);
}
html[data-colorway="liberty"] .ide-header button.primary,
html[data-colorway="liberty"] .ide-command-bar button.primary {
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(248, 250, 252, 0.15);
}
html[data-theme="light"][data-colorway="liberty"] .ide-header button.primary,
html[data-theme="light"][data-colorway="liberty"] .ide-command-bar button.primary {
  box-shadow: 0 0 12px rgba(0, 40, 104, 0.2);
}
@keyframes liberty-twinkle {
  0% { opacity: 0.28; }
  50% { opacity: 0.48; }
  100% { opacity: 0.36; }
}
@keyframes liberty-glow {
  0% { opacity: 0.75; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-colorway="liberty"] body::before,
  html[data-colorway="liberty"] body::after {
    animation: none;
  }
}

/* ----- TITANIUM (premium machined steel / armored plate linework) ----- */
html:not([data-theme="light"])[data-colorway="titanium"] {
  --primary: #c4c9d1;
  --primary-strong: #e2e6eb;
  --primary-glow: rgba(196, 201, 209, 0.45);
  --secondary: #8891a0;
  --secondary-glow: rgba(136, 145, 160, 0.35);
  --tertiary: #6b7280;
  --tertiary-glow: rgba(107, 114, 128, 0.3);
  --contrast-accent: var(--secondary);
  --brain: #adb5c2;
  --chroma-surface: rgba(18, 20, 26, 0.94);
  --chroma-surface-strong: rgba(24, 27, 34, 0.96);
  --shadow: 0 0 32px rgba(184, 188, 198, 0.08), 0 4px 24px rgba(0, 0, 0, 0.35);
  --card-border: rgba(184, 188, 198, 0.2);
  --bg: #0a0a0a;
}
html[data-theme="light"][data-colorway="titanium"] {
  --primary: #1a1a1a;
  --primary-strong: #0a0a0a;
  --primary-glow: rgba(0, 0, 0, 0.18);
  --secondary: #5c5c5c;
  --secondary-glow: rgba(0, 0, 0, 0.12);
  --tertiary: #8a8a8a;
  --tertiary-glow: rgba(0, 0, 0, 0.1);
  --contrast-accent: var(--secondary);
  --brain: #333333;
  --chroma-surface: #f8f8f8;
  --chroma-surface-strong: #ececec;
  --card-border: rgba(0, 0, 0, 0.12);
  --bg: #fafafa;
}

/* Titanium atmosphere — dark: smooth premium plate; light: mechanical linework */
html:not([data-theme="light"])[data-colorway="titanium"] body::before {
  background:
    radial-gradient(ellipse 120% 75% at 50% -8%, rgba(255, 255, 255, 0.065) 0%, transparent 52%),
    radial-gradient(ellipse 85% 55% at 92% 88%, rgba(255, 255, 255, 0.022) 0%, transparent 58%),
    radial-gradient(ellipse 65% 45% at 8% 78%, rgba(0, 0, 0, 0.45) 0%, transparent 55%),
    linear-gradient(178deg, #0c0c0c 0%, #161616 42%, #101010 100%);
  animation: titanium-sheen 12s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="titanium"] body::before {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 47px,
      rgba(0, 0, 0, 0.055) 47px,
      rgba(0, 0, 0, 0.055) 48px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 47px,
      rgba(0, 0, 0, 0.04) 47px,
      rgba(0, 0, 0, 0.04) 48px
    ),
    linear-gradient(180deg, #fcfcfc 0%, #ffffff 42%, #f5f5f5 100%);
  animation: none;
}
html:not([data-theme="light"])[data-colorway="titanium"] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background:
    radial-gradient(ellipse 55% 40% at 25% 15%, rgba(255, 255, 255, 0.035) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 80% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
  mask-image: none;
}
html[data-theme="light"][data-colorway="titanium"] body::after {
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      -34deg,
      transparent 0,
      transparent 12px,
      rgba(0, 0, 0, 0.045) 12px,
      rgba(0, 0, 0, 0.045) 13px
    ),
    repeating-linear-gradient(
      56deg,
      transparent 0,
      transparent 16px,
      rgba(0, 0, 0, 0.028) 16px,
      rgba(0, 0, 0, 0.028) 17px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 96px,
      rgba(0, 0, 0, 0.035) 96px,
      rgba(0, 0, 0, 0.035) 97px
    );
  mask-image: none;
}
html[data-colorway="titanium"] #app {
  position: relative;
  z-index: 1;
}
html[data-colorway="titanium"] .colorway-dot {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
  background: linear-gradient(145deg, #f0f0f0 0%, #9a9a9a 42%, #1a1a1a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 5px rgba(255, 255, 255, 0.08);
  opacity: 0.95;
}
html[data-theme="light"][data-colorway="titanium"] .colorway-dot {
  background: linear-gradient(145deg, #ffffff 0%, #b0b0b0 45%, #2a2a2a 100%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Luxurious mechanical primary buttons */
html[data-colorway="titanium"] .ide-header button.primary,
html[data-colorway="titanium"] .ide-command-bar button.primary,
html[data-colorway="titanium"] .welcome-btn.primary,
html[data-colorway="titanium"] .file-modal-new-file-create.primary,
html[data-colorway="titanium"] .provider-modal-footer button.primary,
html[data-colorway="titanium"] .folder-modal-form button.primary {
  background: linear-gradient(180deg, #3a4049 0%, #22262d 48%, #15181e 100%) !important;
  color: #f0f2f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.22) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}
html[data-colorway="titanium"] .ide-header button.primary:hover,
html[data-colorway="titanium"] .ide-command-bar button.primary:hover,
html[data-colorway="titanium"] .welcome-btn.primary:hover {
  background: linear-gradient(180deg, #454c57 0%, #2a2f38 48%, #1a1d21 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.28) !important;
}
html:not([data-theme="light"])[data-colorway="titanium"] .ide-header button.primary,
html:not([data-theme="light"])[data-colorway="titanium"] .ide-command-bar button.primary,
html:not([data-theme="light"])[data-colorway="titanium"] .welcome-btn.primary {
  background: linear-gradient(180deg, #d4d8de 0%, #b8bcc6 45%, #9aa0ab 100%) !important;
  color: #0a0c0f !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.35) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-colorway="titanium"] .ide-header,
html[data-colorway="titanium"] .ide-command-bar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(0.75);
  -webkit-backdrop-filter: blur(14px) saturate(0.75);
  border-color: rgba(180, 180, 180, 0.14);
}
html[data-theme="light"][data-colorway="titanium"] .ide-header,
html[data-theme="light"][data-colorway="titanium"] .ide-command-bar {
  box-shadow: inset 0 -1px 0 rgba(26, 29, 33, 0.06);
}
@keyframes titanium-sheen {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"])[data-colorway="titanium"] body::before {
    animation: none;
  }
}

/* ----- GREENFIELD (premium cel-cartoon — bold yellow, sky blue, thick black linework) ----- */
html:not([data-theme="light"])[data-colorway="greenfield"] {
  --primary: #ffd90f;
  --primary-strong: #f5c400;
  --primary-glow: rgba(255, 217, 15, 0.55);
  --secondary: #5ba4e8;
  --secondary-glow: rgba(91, 164, 232, 0.5);
  --tertiary: #ff6b9d;
  --tertiary-glow: rgba(255, 107, 157, 0.45);
  --contrast-accent: var(--secondary);
  --brain: #ffe566;
  --chroma-surface: rgba(18, 24, 44, 0.94);
  --chroma-surface-strong: rgba(24, 32, 58, 0.96);
  --shadow: 0 4px 0 rgba(26, 26, 26, 0.65), 0 0 32px rgba(255, 217, 15, 0.12);
  --card-border: rgba(26, 26, 26, 0.85);
  --bg: #14182e;
}
html[data-theme="light"][data-colorway="greenfield"] {
  --primary: #ffd90f;
  --primary-strong: #e6c200;
  --primary-glow: rgba(255, 217, 15, 0.45);
  --secondary: #2196f3;
  --secondary-glow: rgba(33, 150, 243, 0.35);
  --tertiary: #ff4081;
  --tertiary-glow: rgba(255, 64, 129, 0.32);
  --contrast-accent: var(--secondary);
  --brain: #e6c200;
  --chroma-surface: #fff9e6;
  --chroma-surface-strong: #fff3cc;
  --card-border: rgba(26, 26, 26, 0.75);
  --bg: #87ceeb;
}

/* Greenfield atmosphere — dark: twilight over town; light: sunny day + grass */
html[data-colorway="greenfield"] body {
  position: relative;
  isolation: isolate;
  background: transparent;
}
html[data-colorway="greenfield"] body::before,
html[data-colorway="greenfield"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
html[data-colorway="greenfield"] body::before { z-index: -2; }
html[data-colorway="greenfield"] body::after { z-index: -1; }

html:not([data-theme="light"])[data-colorway="greenfield"] body::before {
  background:
    radial-gradient(ellipse 38% 28% at 82% 10%, rgba(255, 217, 15, 0.35) 0%, rgba(255, 217, 15, 0.08) 42%, transparent 68%),
    radial-gradient(ellipse 55% 35% at 12% 78%, rgba(91, 164, 232, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(91, 180, 74, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 45% 22% at 28% 22%, rgba(255, 107, 157, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #0f1428 0%, #1a2240 38%, #14182e 72%, #0d1020 100%);
  animation: greenfield-twilight 18s ease-in-out infinite alternate;
}
html:not([data-theme="light"])[data-colorway="greenfield"] body::after {
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.55) 1px, transparent 1px),
    radial-gradient(ellipse 120% 8% at 50% 0%, rgba(26, 26, 26, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 120% 8% at 50% 100%, rgba(26, 26, 26, 0.45) 0%, transparent 100%);
  background-size: 5px 5px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 3px rgba(26, 26, 26, 0.35);
}

html[data-theme="light"][data-colorway="greenfield"] body::before {
  background:
    radial-gradient(ellipse 32% 28% at 90% 8%, rgba(255, 217, 15, 0.98) 0%, rgba(255, 217, 15, 0.45) 38%, transparent 68%),
    radial-gradient(ellipse 52% 24% at 18% 16%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 48%, transparent 72%),
    radial-gradient(ellipse 44% 20% at 58% 22%, rgba(255, 255, 255, 0.92) 0%, transparent 68%),
    radial-gradient(ellipse 38% 18% at 72% 28%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
    radial-gradient(ellipse 100% 42% at 50% 100%, rgba(91, 180, 74, 0.62) 0%, rgba(91, 180, 74, 0.25) 42%, transparent 72%),
    linear-gradient(180deg, #4a9fe8 0%, #87ceeb 52%, #98d4f0 100%);
  animation: greenfield-cloud-drift 24s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="greenfield"] body::after {
  opacity: 0.38;
  background-image:
    radial-gradient(circle, rgba(26, 26, 26, 0.08) 1.5px, transparent 1.5px);
  background-size: 7px 7px;
  box-shadow: inset 0 0 0 3px rgba(26, 26, 26, 0.2);
}

html[data-colorway="greenfield"] #app {
  position: relative;
  z-index: 1;
}

/* Palette dot — yellow head with thick black outline */
html[data-colorway="greenfield"] .colorway-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe566 0%, #ffd90f 55%, #f5c400 100%);
  border: 2.5px solid #1a1a1a;
  box-shadow: 1.5px 1.5px 0 #1a1a1a;
  opacity: 1;
}
html[data-theme="light"][data-colorway="greenfield"] .colorway-dot {
  background: linear-gradient(145deg, #fff176 0%, #ffd90f 50%, #f5c400 100%);
  box-shadow: 2px 2px 0 #1a1a1a;
}

/* Cel-shaded cartoon primary buttons — thick black ink + offset shadow */
html[data-colorway="greenfield"] .ide-header button.primary,
html[data-colorway="greenfield"] .ide-command-bar button.primary,
html[data-colorway="greenfield"] .welcome-btn.primary,
html[data-colorway="greenfield"] .file-modal-new-file-create.primary,
html[data-colorway="greenfield"] .provider-modal-footer button.primary,
html[data-colorway="greenfield"] .folder-modal-form button.primary {
  background: linear-gradient(180deg, #ffe566 0%, #ffd90f 48%, #f5c400 100%) !important;
  color: #1a1a1a !important;
  border: 3px solid #1a1a1a !important;
  box-shadow: 4px 4px 0 #1a1a1a !important;
  font-weight: 700;
  text-shadow: none;
  letter-spacing: 0.03em;
}
html[data-colorway="greenfield"] .ide-header button.primary:hover,
html[data-colorway="greenfield"] .ide-command-bar button.primary:hover,
html[data-colorway="greenfield"] .welcome-btn.primary:hover {
  background: linear-gradient(180deg, #fff176 0%, #ffe566 48%, #ffd90f 100%) !important;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #1a1a1a !important;
}
html:not([data-theme="light"])[data-colorway="greenfield"] .ide-header button.primary,
html:not([data-theme="light"])[data-colorway="greenfield"] .ide-command-bar button.primary,
html:not([data-theme="light"])[data-colorway="greenfield"] .welcome-btn.primary {
  background: linear-gradient(180deg, #6eb5f5 0%, #5ba4e8 48%, #3d8fd9 100%) !important;
  color: #fffef5 !important;
  border: 3px solid #1a1a1a !important;
  box-shadow: 4px 4px 0 #1a1a1a, 0 0 18px rgba(255, 217, 15, 0.15) !important;
  text-shadow: 0 1px 0 rgba(26, 26, 26, 0.35);
}
html:not([data-theme="light"])[data-colorway="greenfield"] .ide-header button.primary:hover,
html:not([data-theme="light"])[data-colorway="greenfield"] .ide-command-bar button.primary:hover,
html:not([data-theme="light"])[data-colorway="greenfield"] .welcome-btn.primary:hover {
  background: linear-gradient(180deg, #82c4ff 0%, #6eb5f5 48%, #5ba4e8 100%) !important;
}

/* Bold ink borders on chrome bars */
html[data-colorway="greenfield"] .ide-header,
html[data-colorway="greenfield"] .ide-command-bar {
  border-color: #1a1a1a !important;
  border-width: 0 0 3px 0 !important;
  border-style: solid !important;
  box-shadow: 0 4px 0 rgba(26, 26, 26, 0.35);
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
}
html[data-theme="light"][data-colorway="greenfield"] .ide-header,
html[data-theme="light"][data-colorway="greenfield"] .ide-command-bar {
  box-shadow: 0 4px 0 rgba(26, 26, 26, 0.55);
}

@keyframes greenfield-twilight {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.08) saturate(1.12); }
}
@keyframes greenfield-cloud-drift {
  0% { filter: brightness(1); transform: translateX(0); }
  100% { filter: brightness(1.04); transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-colorway="greenfield"] body::before {
    animation: none;
  }
  html[data-colorway="greenfield"] .ide-header button.primary:hover,
  html[data-colorway="greenfield"] .ide-command-bar button.primary:hover,
  html[data-colorway="greenfield"] .welcome-btn.primary:hover {
    transform: none;
  }
}

/* ----- LIQUID GOLD (premium molten gold — flowing amber caustics on onyx) ----- */
html:not([data-theme="light"])[data-colorway="liquidgold"] {
  --primary: #ffd54f;
  --primary-strong: #ffb300;
  --primary-glow: rgba(255, 213, 79, 0.55);
  --secondary: #ff8f00;
  --secondary-glow: rgba(255, 143, 0, 0.45);
  --tertiary: #fff8e1;
  --tertiary-glow: rgba(255, 248, 220, 0.35);
  --contrast-accent: var(--secondary);
  --brain: #ffe082;
  --chroma-surface: rgba(22, 14, 6, 0.94);
  --chroma-surface-strong: rgba(32, 20, 8, 0.96);
  --shadow: 0 0 36px rgba(255, 213, 79, 0.14), 0 0 64px rgba(255, 143, 0, 0.06);
  --card-border: rgba(255, 213, 79, 0.28);
  --bg: #0a0804;
}
html[data-theme="light"][data-colorway="liquidgold"] {
  --primary: #b8860b;
  --primary-strong: #996515;
  --primary-glow: rgba(184, 134, 11, 0.28);
  --secondary: #8b6914;
  --secondary-glow: rgba(139, 105, 20, 0.26);
  --tertiary: #fff8e1;
  --tertiary-glow: rgba(184, 134, 11, 0.12);
  --contrast-accent: var(--secondary);
  --brain: #b8860b;
  --chroma-surface: #fffbf0;
  --chroma-surface-strong: #fff3d6;
  --card-border: rgba(184, 134, 11, 0.22);
  --bg: #fffdf5;
}

html[data-colorway="liquidgold"] body {
  position: relative;
  isolation: isolate;
  background: transparent;
}
html[data-colorway="liquidgold"] body::before,
html[data-colorway="liquidgold"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
html[data-colorway="liquidgold"] body::before { z-index: -2; }
html[data-colorway="liquidgold"] body::after { z-index: -1; }

html:not([data-theme="light"])[data-colorway="liquidgold"] body::before {
  background:
    radial-gradient(ellipse 55% 40% at 18% 22%, rgba(255, 213, 79, 0.22) 0%, rgba(255, 179, 0, 0.08) 42%, transparent 68%),
    radial-gradient(ellipse 48% 35% at 82% 18%, rgba(255, 143, 0, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 111, 0, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 28% at 68% 72%, rgba(255, 213, 79, 0.1) 0%, transparent 62%),
    linear-gradient(168deg, #0a0804 0%, #141008 38%, #0c0a06 72%, #080604 100%);
  animation: liquidgold-flow 16s ease-in-out infinite alternate;
}
html:not([data-theme="light"])[data-colorway="liquidgold"] body::after {
  opacity: 0.55;
  background:
    radial-gradient(ellipse 35% 22% at 32% 38%, rgba(255, 248, 220, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 28% 18% at 74% 58%, rgba(255, 213, 79, 0.12) 0%, transparent 68%),
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 213, 79, 0.06) 46%,
      rgba(255, 248, 220, 0.1) 50%,
      rgba(255, 213, 79, 0.06) 54%,
      transparent 62%,
      transparent 100%
    );
  background-size: 100% 100%, 100% 100%, 220% 100%;
  animation: liquidgold-shimmer 10s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="liquidgold"] body::before {
  background:
    radial-gradient(ellipse 50% 38% at 14% 12%, rgba(255, 223, 120, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 45% 32% at 88% 20%, rgba(218, 165, 32, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(184, 134, 11, 0.12) 0%, transparent 52%),
    linear-gradient(180deg, #fffdf5 0%, #fff8e8 48%, #fff3d6 100%);
  animation: liquidgold-flow 20s ease-in-out infinite alternate;
}
html[data-theme="light"][data-colorway="liquidgold"] body::after {
  opacity: 0.38;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 248, 220, 0.45) 48%,
    rgba(255, 223, 120, 0.65) 50%,
    rgba(255, 248, 220, 0.45) 52%,
    transparent 60%,
    transparent 100%
  );
  background-size: 240% 100%;
  animation: liquidgold-shimmer 12s ease-in-out infinite alternate;
}

html[data-colorway="liquidgold"] #app {
  position: relative;
  z-index: 1;
}
html[data-colorway="liquidgold"] .colorway-dot {
  width: 10px;
  height: 10px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse 70% 55% at 35% 28%, #fff8e1 0%, #ffd54f 45%, #ff8f00 100%);
  box-shadow:
    0 0 8px rgba(255, 213, 79, 0.65),
    0 0 14px rgba(255, 143, 0, 0.35),
    inset 0 -2px 4px rgba(139, 90, 0, 0.35);
  opacity: 0.95;
}
html[data-theme="light"][data-colorway="liquidgold"] .colorway-dot {
  background: radial-gradient(ellipse 70% 55% at 35% 28%, #fff8e1 0%, #daa520 45%, #b8860b 100%);
  box-shadow: 0 0 6px rgba(184, 134, 11, 0.45), inset 0 -1px 3px rgba(100, 60, 0, 0.25);
}

html[data-colorway="liquidgold"] .ide-header button.primary,
html[data-colorway="liquidgold"] .ide-command-bar button.primary,
html[data-colorway="liquidgold"] .welcome-btn.primary,
html[data-colorway="liquidgold"] .file-modal-new-file-create.primary,
html[data-colorway="liquidgold"] .provider-modal-footer button.primary,
html[data-colorway="liquidgold"] .folder-modal-form button.primary {
  background: linear-gradient(180deg, #ffe082 0%, #ffd54f 42%, #ffb300 100%) !important;
  color: #1a0f00 !important;
  border: 1px solid rgba(255, 248, 220, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(139, 90, 0, 0.25),
    0 0 20px rgba(255, 213, 79, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.28) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  letter-spacing: 0.02em;
}
html[data-colorway="liquidgold"] .ide-header button.primary:hover,
html[data-colorway="liquidgold"] .ide-command-bar button.primary:hover,
html[data-colorway="liquidgold"] .welcome-btn.primary:hover {
  background: linear-gradient(180deg, #ffecb3 0%, #ffe082 42%, #ffc107 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(139, 90, 0, 0.2),
    0 0 28px rgba(255, 213, 79, 0.48),
    0 6px 20px rgba(0, 0, 0, 0.32) !important;
}
html:not([data-theme="light"])[data-colorway="liquidgold"] .ide-header button.primary,
html:not([data-theme="light"])[data-colorway="liquidgold"] .ide-command-bar button.primary,
html:not([data-theme="light"])[data-colorway="liquidgold"] .welcome-btn.primary {
  background: linear-gradient(180deg, #ffc947 0%, #ffb300 45%, #ff8f00 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.35),
    inset 0 -1px 0 rgba(100, 60, 0, 0.35),
    0 0 24px rgba(255, 179, 0, 0.42),
    0 4px 18px rgba(0, 0, 0, 0.4) !important;
}
html[data-colorway="liquidgold"] .ide-header,
html[data-colorway="liquidgold"] .ide-command-bar {
  border-color: rgba(255, 213, 79, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.08);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
html[data-theme="light"][data-colorway="liquidgold"] .ide-header,
html[data-theme="light"][data-colorway="liquidgold"] .ide-command-bar {
  border-color: rgba(184, 134, 11, 0.16);
}

@keyframes liquidgold-flow {
  0% { filter: brightness(1) saturate(1); transform: translateY(0); }
  100% { filter: brightness(1.1) saturate(1.15); transform: translateY(-6px); }
}
@keyframes liquidgold-shimmer {
  0% { background-position: 0% 0%, 0% 0%, -30% 0%; opacity: 0.42; }
  100% { background-position: 0% 0%, 0% 0%, 130% 0%; opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-colorway="liquidgold"] body::before,
  html[data-colorway="liquidgold"] body::after {
    animation: none;
  }
}

/* ----- GOLD BARS (premium bullion vault — stacked ingot linework) ----- */
html:not([data-theme="light"])[data-colorway="goldbars"] {
  --primary: #d4af37;
  --primary-strong: #f4d03f;
  --primary-glow: rgba(212, 175, 55, 0.5);
  --secondary: #c9a227;
  --secondary-glow: rgba(201, 162, 39, 0.4);
  --tertiary: #fff8e1;
  --tertiary-glow: rgba(255, 248, 220, 0.32);
  --contrast-accent: var(--secondary);
  --brain: #ffe082;
  --chroma-surface: rgba(20, 16, 10, 0.94);
  --chroma-surface-strong: rgba(28, 22, 14, 0.96);
  --shadow: 0 0 32px rgba(212, 175, 55, 0.1), 0 4px 24px rgba(0, 0, 0, 0.35);
  --card-border: rgba(212, 175, 55, 0.22);
  --bg: #0f0d0a;
}
html[data-theme="light"][data-colorway="goldbars"] {
  --primary: #a67c00;
  --primary-strong: #8b6914;
  --primary-glow: rgba(166, 124, 0, 0.22);
  --secondary: #8b6914;
  --secondary-glow: rgba(139, 105, 20, 0.18);
  --tertiary: #d4af37;
  --tertiary-glow: rgba(212, 175, 55, 0.15);
  --contrast-accent: var(--secondary);
  --brain: #a67c00;
  --chroma-surface: #faf6eb;
  --chroma-surface-strong: #f0e8d4;
  --card-border: rgba(166, 124, 0, 0.18);
  --bg: #fffdf8;
}

html[data-colorway="goldbars"] body {
  position: relative;
  isolation: isolate;
  background: transparent;
}
html[data-colorway="goldbars"] body::before,
html[data-colorway="goldbars"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
html[data-colorway="goldbars"] body::before { z-index: -2; }
html[data-colorway="goldbars"] body::after { z-index: -1; }

html:not([data-theme="light"])[data-colorway="goldbars"] body::before {
  background:
    radial-gradient(ellipse 100% 60% at 50% -5%, rgba(244, 208, 63, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 82%, rgba(212, 175, 55, 0.1) 0%, transparent 58%),
    radial-gradient(ellipse 48% 36% at 12% 88%, rgba(166, 124, 0, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0f0d0a 0%, #1a1610 42%, #12100c 100%);
  animation: goldbars-sheen 14s ease-in-out infinite alternate;
}
html:not([data-theme="light"])[data-colorway="goldbars"] body::after {
  opacity: 0.38;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 78px,
      rgba(212, 175, 55, 0.04) 78px,
      rgba(212, 175, 55, 0.04) 79px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 118px,
      rgba(212, 175, 55, 0.035) 118px,
      rgba(212, 175, 55, 0.035) 119px
    ),
    linear-gradient(
      180deg,
      rgba(212, 175, 55, 0.06) 0%,
      transparent 8%,
      transparent 92%,
      rgba(212, 175, 55, 0.05) 100%
    );
}
html[data-theme="light"][data-colorway="goldbars"] body::before {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 63px,
      rgba(166, 124, 0, 0.045) 63px,
      rgba(166, 124, 0, 0.045) 64px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 95px,
      rgba(166, 124, 0, 0.035) 95px,
      rgba(166, 124, 0, 0.035) 96px
    ),
    linear-gradient(180deg, #faf6eb 0%, #fffdf8 48%, #f5efe0 100%);
  animation: none;
}
html[data-theme="light"][data-colorway="goldbars"] body::after {
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(
      -28deg,
      transparent 0,
      transparent 14px,
      rgba(166, 124, 0, 0.04) 14px,
      rgba(166, 124, 0, 0.04) 15px
    );
}

html[data-colorway="goldbars"] #app {
  position: relative;
  z-index: 1;
}
html[data-colorway="goldbars"] .colorway-dot {
  width: 12px;
  height: 7px;
  border-radius: 1px;
  background: linear-gradient(180deg, #f7dc6f 0%, #d4af37 42%, #a67c00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.45),
    inset 0 -1px 0 rgba(80, 60, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.35),
    0 0 6px rgba(212, 175, 55, 0.35);
  opacity: 0.95;
}
html[data-theme="light"][data-colorway="goldbars"] .colorway-dot {
  background: linear-gradient(180deg, #fff8e1 0%, #d4af37 45%, #8b6914 100%);
  box-shadow: inset 0 -1px 2px rgba(80, 60, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
}

html[data-colorway="goldbars"] .ide-header button.primary,
html[data-colorway="goldbars"] .ide-command-bar button.primary,
html[data-colorway="goldbars"] .welcome-btn.primary,
html[data-colorway="goldbars"] .file-modal-new-file-create.primary,
html[data-colorway="goldbars"] .provider-modal-footer button.primary,
html[data-colorway="goldbars"] .folder-modal-form button.primary {
  background: linear-gradient(180deg, #f4d03f 0%, #d4af37 48%, #b8960c 100%) !important;
  color: #1a1408 !important;
  border: 1px solid rgba(255, 248, 220, 0.32) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 220, 0.35),
    inset 0 -2px 0 rgba(100, 75, 0, 0.3),
    0 3px 12px rgba(0, 0, 0, 0.28) !important;
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.2);
  letter-spacing: 0.03em;
}
html[data-colorway="goldbars"] .ide-header button.primary:hover,
html[data-colorway="goldbars"] .ide-command-bar button.primary:hover,
html[data-colorway="goldbars"] .welcome-btn.primary:hover {
  background: linear-gradient(180deg, #f7dc6f 0%, #e6c65c 48%, #c9a227 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 220, 0.42),
    inset 0 -2px 0 rgba(100, 75, 0, 0.25),
    0 5px 16px rgba(0, 0, 0, 0.32) !important;
}
html:not([data-theme="light"])[data-colorway="goldbars"] .ide-header button.primary,
html:not([data-theme="light"])[data-colorway="goldbars"] .ide-command-bar button.primary,
html:not([data-theme="light"])[data-colorway="goldbars"] .welcome-btn.primary {
  background: linear-gradient(180deg, #e6c65c 0%, #d4af37 45%, #a67c00 100%) !important;
  color: #1a1408 !important;
  border: 1px solid rgba(244, 208, 63, 0.28) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 220, 0.28),
    inset 0 -2px 0 rgba(80, 60, 0, 0.38),
    0 0 18px rgba(212, 175, 55, 0.28),
    0 3px 14px rgba(0, 0, 0, 0.38) !important;
}
html:not([data-theme="light"])[data-colorway="goldbars"] .ide-header,
html:not([data-theme="light"])[data-colorway="goldbars"] .ide-command-bar {
  border-color: rgba(212, 175, 55, 0.16);
  box-shadow: inset 0 1px 0 rgba(244, 208, 63, 0.08);
}
html[data-colorway="goldbars"] .ide-header,
html[data-colorway="goldbars"] .ide-command-bar {
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}
html[data-theme="light"][data-colorway="goldbars"] .ide-header,
html[data-theme="light"][data-colorway="goldbars"] .ide-command-bar {
  border-color: rgba(166, 124, 0, 0.14);
  box-shadow: inset 0 -1px 0 rgba(166, 124, 0, 0.06);
}

@keyframes goldbars-sheen {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"])[data-colorway="goldbars"] body::before {
    animation: none;
  }
}

/* ----- BLACK DOT (kit — pure black · white type · white dot · mint live) ----- */
html:not([data-theme="light"])[data-colorway="blackdot"] {
  --primary: #ffffff;
  --primary-strong: #ffffff;
  --primary-glow: rgba(255, 255, 255, 0.35);
  --secondary: #22c55e;
  --secondary-glow: rgba(34, 197, 94, 0.4);
  --tertiary: #ffbd2e;
  --tertiary-glow: rgba(255, 189, 46, 0.35);
  --contrast-accent: var(--secondary);
  --brain: #ffffff;
  --chroma-surface: rgba(10, 10, 10, 0.96);
  --chroma-surface-strong: rgba(14, 14, 14, 0.98);
  --success: #22c55e;
  --danger: #ff2a1f;
  --warning: #ffbd2e;
  --discoball: #ffffff;
  --shadow: 0 0 24px rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.14);
  --bg: #000000;
  --card-bg: rgba(10, 10, 10, 0.92);
  --text: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.4);
}
html[data-theme="light"][data-colorway="blackdot"] {
  --primary: #000000;
  --primary-strong: #000000;
  --primary-glow: rgba(0, 0, 0, 0.18);
  --secondary: #15803d;
  --secondary-glow: rgba(21, 128, 61, 0.25);
  --tertiary: #b45309;
  --tertiary-glow: rgba(180, 83, 9, 0.2);
  --contrast-accent: var(--secondary);
  --brain: #000000;
  --chroma-surface: #f5f5f5;
  --chroma-surface-strong: #ececec;
  --success: #15803d;
  --danger: #ff2a1f;
  --warning: #b45309;
  --discoball: #000000;
  --card-border: rgba(0, 0, 0, 0.2);
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #000000;
  --text-muted: rgba(0, 0, 0, 0.5);
  --shadow: 0 0 18px rgba(0, 0, 0, 0.06);
}

html[data-colorway="blackdot"] body {
  position: relative;
  isolation: isolate;
  background: transparent;
}
html[data-colorway="blackdot"] body::before,
html[data-colorway="blackdot"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
html[data-colorway="blackdot"] body::before { z-index: -2; }
html[data-colorway="blackdot"] body::after { z-index: -1; }

html:not([data-theme="light"])[data-colorway="blackdot"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
    #000000;
}
html:not([data-theme="light"])[data-colorway="blackdot"] body::after {
  opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
}
html[data-theme="light"][data-colorway="blackdot"] body::before {
  background: #ffffff;
}
html[data-theme="light"][data-colorway="blackdot"] body::after {
  opacity: 0.3;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.12) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
}

html[data-colorway="blackdot"] #app {
  position: relative;
  z-index: 1;
}

html[data-colorway="blackdot"] .colorway-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  opacity: 1;
}
html[data-theme="light"][data-colorway="blackdot"] .colorway-dot {
  background: #000000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

html[data-colorway="blackdot"] .ide-header button.primary,
html[data-colorway="blackdot"] .ide-command-bar button.primary,
html[data-colorway="blackdot"] .welcome-btn.primary,
html[data-colorway="blackdot"] .file-modal-new-file-create.primary,
html[data-colorway="blackdot"] .provider-modal-footer button.primary,
html[data-colorway="blackdot"] .folder-modal-form button.primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-shadow: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-colorway="blackdot"] .ide-header button.primary:hover,
html[data-colorway="blackdot"] .ide-command-bar button.primary:hover,
html[data-colorway="blackdot"] .welcome-btn.primary:hover {
  background: transparent !important;
  color: #ffffff !important;
}
html[data-theme="light"][data-colorway="blackdot"] .ide-header button.primary,
html[data-theme="light"][data-colorway="blackdot"] .ide-command-bar button.primary,
html[data-theme="light"][data-colorway="blackdot"] .welcome-btn.primary {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
html[data-theme="light"][data-colorway="blackdot"] .ide-header button.primary:hover,
html[data-theme="light"][data-colorway="blackdot"] .ide-command-bar button.primary:hover,
html[data-theme="light"][data-colorway="blackdot"] .welcome-btn.primary:hover {
  background: transparent !important;
  color: #000000 !important;
}

html:not([data-theme="light"])[data-colorway="blackdot"] .ide-header,
html:not([data-theme="light"])[data-colorway="blackdot"] .ide-command-bar {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"][data-colorway="blackdot"] .ide-header,
html[data-theme="light"][data-colorway="blackdot"] .ide-command-bar {
  border-color: #000000;
  box-shadow: none;
}