@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
  --content-max-width: 900px;

  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  --color-surface: #ffffff;
  --color-border: #dee2e6;
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  --color-primary: #4361ee;
  --color-primary-hover: #3a56d4;
  --color-danger: #ef476f;
  --color-danger-hover: #d63d5f;
  --color-success: #06d6a0;
  --color-warning: #ffd166;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

[data-wide="true"] {
  --content-max-width: 1400px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1b26;
    --color-bg-secondary: #24283b;
    --color-bg-tertiary: #414868;
    --color-surface: #24283b;
    --color-border: #414868;
    --color-text: #c0caf5;
    --color-text-secondary: #a9b1d6;
    --color-text-muted: #565f89;
    --color-primary: #7aa2f7;
    --color-primary-hover: #89b4fa;
    --color-danger: #f7768e;
    --color-danger-hover: #ff9e64;
    --color-success: #9ece6a;
    --color-warning: #e0af68;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] {
  --color-bg: #1a1b26;
  --color-bg-secondary: #24283b;
  --color-bg-tertiary: #414868;
  --color-surface: #24283b;
  --color-border: #414868;
  --color-text: #c0caf5;
  --color-text-secondary: #a9b1d6;
  --color-text-muted: #565f89;
  --color-primary: #7aa2f7;
  --color-primary-hover: #89b4fa;
  --color-danger: #f7768e;
  --color-danger-hover: #ff9e64;
  --color-success: #9ece6a;
  --color-warning: #e0af68;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

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

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}