@import "modern-normalize";
@import "css-reset.css";

:root {
  --layout-width: 1080px;
  --background: #f6f7f9;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --card-bg: #ffffff;
  --text-color: #2b2f36;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --primary: #4f6df5;
  --tag-bg: #eef1fe;
  --tag-text: #4f6df5;
  --tag-hover-bg: #dfe6fd;
}

.dark {
  --background: #0a0a0a;
  --card-bg: #161b22;
  --text-color: #ffffff;
  --text-secondary: #e5e7eb;
  --border: #e5e7eb;
  --primary: #1e293b;
  --tag-bg: #27272a;
  --tag-text: #f3f4f6;
  --tag-hover-bg: #334155;
}

html,
body {
  min-height: 100vh;
  font-size: 16px;
  background: var(--background);
  color: var(--text-color);
}

body {
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-content {
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }
}