:root {
  /* User-Defined 5-Color Palette */
  --color-ash-grey: #BECEBA;
  --color-eggshell: #EDE8D9;
  --color-frosted-blue: #9FD3DD;
  --color-almond-cream: #F0D9BE;
  --color-strong-cyan: #33BECB;

  /* Semantic Theme Tokens */
  --color-bg-base: var(--color-eggshell);
  --color-surface: #FFFFFF;
  --color-surface-soft: var(--color-almond-cream);
  --color-border: var(--color-ash-grey);
  --color-border-active: var(--color-strong-cyan);
  --color-text-main: #1a252f;
  --color-text-muted: #5a6b7c;
  --color-accent: var(--color-strong-cyan);

  /* Spacing & Geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.15s ease;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.97);
}

input, select {
  font-family: inherit;
  color: inherit;
}