:root {
  --color-bg:           #F7F8FA;
  --color-surface:      #FFFFFF;
  --color-dark:         #0D1117;
  --color-dark-mid:     #161B27;
  --color-text:         #111827;
  --color-muted:        #6B7280;
  --color-border:       #E5E7EB;
  --color-border-focus: #2563EB;
  --color-accent:       #2563EB;
  --color-accent-hover: #1D4ED8;
  --color-accent-light: #EFF6FF;
  --color-success:      #059669;
  --color-success-bg:   #ECFDF5;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 25px -5px rgba(0,0,0,0.08), 0 4px 10px -3px rgba(0,0,0,0.04);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
}