:root {
  --yellow-100: #f1bb14;
  --yellow-200: #f5c842;
  --yellow-300: #e6b010;

  --orange-100: #d99517;
  --orange-200: #fb6060;
  --orange-300: #e85a4a;

  --white-100: #ffffff;
  --white-200: #f6f8fb;
  --white-300: #f1f5f8;

  --black-100: #1a1a1f;
  --black-200: #2a2a30;

  --gray-100: #88878c;
  --gray-200: #e2e8f0;
  --gray-300: #f4f5f9;

  --primary-100: var(--yellow-100);
  --primary-200: var(--orange-100);
  --primary-300: var(--orange-200);

  --secondary-100: var(--gray-100);
  --secondary-200: var(--black-100);
  --secondary-300: var(--gray-200);

  --accent-100: var(--orange-100);
  --accent-200: var(--orange-200);
  --accent-300: var(--yellow-100);

  --surface-100: var(--white-100);
  --surface-200: var(--gray-300);

  --bg-100: var(--white-200);
  --bg-200: var(--surface-100);

  --text-100: var(--black-100);
  --text-200: var(--gray-100);

  --border-100: var(--gray-200);

  --elevation-100: 0 2px 8px rgba(136, 135, 140, 0.08);
  --elevation-200: 0 4px 16px rgba(136, 135, 140, 0.12);
  --elevation-300: 0 8px 24px rgba(136, 135, 140, 0.16);
  --elevation-400: 0 12px 32px rgba(136, 135, 140, 0.2);

  --radius: 16px;
  --radius-sm: 12px;

  --space-base: 8px;
  --space-1: calc(var(--space-base) * 0.5);
  --space-2: var(--space-base);
  --space-3: calc(var(--space-base) * 1.5);
  --space-4: calc(var(--space-base) * 2);
  --space-5: calc(var(--space-base) * 3);
  --space-6: calc(var(--space-base) * 4);
  --space-8: calc(var(--space-base) * 6);
  --space-10: calc(var(--space-base) * 8);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: var(--black-200);
    --surface-200: var(--black-100);

    --bg-100: var(--black-100);
    --bg-200: var(--surface-100);

    --text-100: var(--white-100);
    --text-200: var(--gray-100);

    --border-100: var(--black-200);

    --elevation-100: none;
    --elevation-200: none;
    --elevation-300: none;
    --elevation-400: none;
  }
}

[data-theme="dark"] {
  --surface-100: var(--black-200);
  --surface-200: var(--black-100);

  --bg-100: var(--black-100);
  --bg-200: var(--surface-100);

  --text-100: var(--white-100);
  --text-200: var(--gray-100);

  --border-100: #2a2a2a;

  --elevation-100: none;
  --elevation-200: none;
  --elevation-300: none;
  --elevation-400: none;
}

[data-theme="light"] {
  --surface-100: var(--white-100);
  --surface-200: var(--gray-300);

  --bg-100: var(--white-300);
  --bg-200: var(--surface-100);

  --text-100: var(--black-100);
  --text-200: var(--gray-100);

  --border-100: var(--gray-200);

  --elevation-100: 0 2px 8px rgba(136, 135, 140, 0.08);
  --elevation-200: 0 4px 16px rgba(136, 135, 140, 0.12);
  --elevation-300: 0 8px 24px rgba(136, 135, 140, 0.16);
  --elevation-400: 0 12px 32px rgba(136, 135, 140, 0.2);
}

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

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  background: var(--bg-100);
  color: var(--text-100);
  min-height: 100vh;
  overflow-x: hidden;
}

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