/* Catppuccin Latte (light) — default until JS sets data-theme */
:root,
[data-theme='latte'] {
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;
  --ctp-surface0: #ccd0da;
  --ctp-surface1: #bcc0cc;
  --ctp-overlay0: #9ca0b0;
  --ctp-overlay1: #8c8fa1;
  --ctp-text: #4c4f69;
  --ctp-subtext0: #6c6f85;
  --ctp-subtext1: #5c5f77;
  --ctp-mauve: #8839ef;
  --ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 18%, var(--ctp-base));
  --ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 12%, var(--ctp-base));
  color-scheme: light;
}

/* Catppuccin Mocha (dark) */
[data-theme='mocha'] {
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-text: #cdd6f4;
  --ctp-subtext0: #a6adc8;
  --ctp-subtext1: #bac2de;
  --ctp-mauve: #cba6f7;
  --ctp-mauve-muted: color-mix(in srgb, var(--ctp-mauve) 22%, var(--ctp-base));
  --ctp-mauve-hover: color-mix(in srgb, var(--ctp-mauve) 14%, var(--ctp-base));
  color-scheme: dark;
}

:root {
  color: var(--ctp-text);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--ctp-mauve) 22%, transparent) 0%,
      transparent 45%
    ),
    linear-gradient(180deg, var(--ctp-base) 0%, var(--ctp-mantle) 100%);
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
}

#root {
  min-height: 100vh;
}