/* Catppuccin Mocha (dark) + Latte (light) palettes */
:root {
  /* Mocha */
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text: #cdd6f4;

  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --peach: #fab387;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --blue: #89b4fa;
  --lavender: #b4befe;
}

.theme-light {
  /* Latte */
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
  --surface0: #ccd0da;
  --surface1: #bcc0cc;
  --surface2: #acb0be;
  --overlay0: #9ca0b0;
  --overlay1: #8c8fa1;
  --overlay2: #7c7f93;
  --subtext0: #6c6f85;
  --subtext1: #5c5f77;
  --text: #4c4f69;

  --rosewater: #dc8a78;
  --flamingo: #dd7878;
  --pink: #ea76cb;
  --mauve: #8839ef;
  --red: #d20f39;
  --maroon: #e64553;
  --peach: #fe640b;
  --yellow: #df8e1d;
  --green: #40a02b;
  --teal: #179299;
  --sky: #04a5e5;
  --sapphire: #209fb5;
  --blue: #1e66f5;
  --lavender: #7287fd;
}

/* Language dot colors (same across themes) */
.lang-JavaScript { --lang: var(--yellow); }
.lang-Python     { --lang: var(--blue); }
.lang-Shell      { --lang: var(--green); }
.lang-TypeScript { --lang: var(--sapphire); }
.lang-Go         { --lang: var(--teal); }
.lang-Rust       { --lang: var(--peach); }
.lang-C          { --lang: var(--lavender); }
.lang-Assembly   { --lang: var(--red); }
.lang-PowerShell { --lang: var(--sky); }

/* Density */
.density-compact { --pad: 10px; --gap: 8px; --card-pad: 14px; --row: 28px; }
.density-cozy    { --pad: 16px; --gap: 14px; --card-pad: 20px; --row: 36px; }

/* Shared chrome */
.chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--mantle);
  border-bottom: 1px solid var(--surface0);
  font: 12px/1 ui-monospace, "JetBrains Mono", "Fira Code", Menlo, monospace;
  color: var(--subtext0);
}
.tl { display: flex; gap: 6px; margin-right: 8px; }
.tl span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tl .r { background: var(--red); }
.tl .y { background: var(--yellow); }
.tl .g { background: var(--green); }

.tab {
  padding: 6px 12px;
  background: var(--base);
  border: 1px solid var(--surface0);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: -1px;
}
.tab .mod { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; }

.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface0);
  color: var(--subtext1);
  border: 1px solid var(--surface1);
  white-space: nowrap;
}

.lang-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lang, var(--overlay1));
  display: inline-block;
  flex-shrink: 0;
}

.topic {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--blue) 14%, transparent);
  color: var(--blue);
  border: 1px solid color-mix(in oklab, var(--blue) 25%, transparent);
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* Scrollbars */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 999px; }
.scroll::-webkit-scrollbar-track { background: transparent; }