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

:root {
  --bg: #131313;
  --fg: #E2E2E2;
  --heading: #E2E2E2;
  --input-bg: #2A2A2A;
  --input-border: #474747;
  --input-focus: #DDB7FF;
  --placeholder: #919191;
  --muted: #C6C6C6;
  --error: #CF6679;
  --btn-bg: #DDB7FF;
  --btn-fg: #470E77;
  --btn-hover: #CA94FD;
  --toggle-bg: transparent;
  --toggle-fg: #C6C6C6;
  --toggle-hover: #E2E2E2;
  --panel-bg: #1D1D1D;
  --panel-border: #474747;
}

html.light {
  --bg: #F9F9F9;
  --fg: #1B1B1B;
  --heading: #1B1B1B;
  --input-bg: #E8E8E8;
  --input-border: #C6C6C6;
  --input-focus: #7846A9;
  --placeholder: #777777;
  --muted: #474747;
  --error: #790000;
  --btn-bg: #7846A9;
  --btn-fg: #FFFFFF;
  --btn-hover: #5F2C8F;
  --toggle-bg: transparent;
  --toggle-fg: #777777;
  --toggle-hover: #1B1B1B;
  --panel-bg: #FFFFFF;
  --panel-border: #C6C6C6;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
}

.theme-toggle {
  background: var(--toggle-bg);
  border: none;
  cursor: pointer;
  color: var(--toggle-fg);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.theme-toggle:hover {
  color: var(--toggle-hover);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}