/* Catppuccin Mocha (default) + Latte, accent = green */
:root, [data-theme="mocha"] {
  --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; --text: #cdd6f4; --subtext1: #bac2de; --subtext0: #a6adc8;
  --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; --surface2: #585b70; --surface1: #45475a;
  --surface0: #313244; --base: #1e1e2e; --mantle: #181825; --crust: #11111b;
  --accent: var(--green);
  --accent-ink: var(--crust);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
[data-theme="latte"] {
  --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; --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85;
  --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; --surface2: #acb0be; --surface1: #bcc0cc;
  --surface0: #ccd0da; --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8;
  --accent-ink: #eff1f5;
  --shadow: 0 10px 30px -14px rgba(76, 79, 105, 0.35);
  color-scheme: light;
}

:root {
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--base); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font: 600 0.92rem var(--sans); text-decoration: none;
  background: var(--accent); color: var(--accent-ink);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.2s;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--surface1); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

.input {
  width: 100%; padding: 11px 12px 11px 40px; border-radius: 10px;
  border: 1px solid var(--surface1); background: var(--mantle); color: var(--text);
  font: 0.95rem var(--sans); transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--overlay0); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }