:root {
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-text: #1a1a2e;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-code-bg: #f3f4f6;
  --color-card-bg: #ffffff;
  --color-tag-bg: #eff6ff;
  --color-tag-text: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --color-bg: #0f0f14;
  --color-bg-secondary: #1a1a24;
  --color-text: #e8e8ed;
  --color-text-muted: #9ca3af;
  --color-border: #2d2d3a;
  --color-accent: #60a5fa;
  --color-accent-hover: #93bbfd;
  --color-code-bg: #1a1a24;
  --color-card-bg: #1a1a24;
  --color-tag-bg: #1e293b;
  --color-tag-text: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f0f14;
    --color-bg-secondary: #1a1a24;
    --color-text: #e8e8ed;
    --color-text-muted: #9ca3af;
    --color-border: #2d2d3a;
    --color-accent: #60a5fa;
    --color-accent-hover: #93bbfd;
    --color-code-bg: #1a1a24;
    --color-card-bg: #1a1a24;
    --color-tag-bg: #1e293b;
    --color-tag-text: #60a5fa;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

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

html {
  overflow-x: clip;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: transparent;
}

body {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.2s, color 0.2s;
}