.dark {
  --color-bg: #0a0c0d;
  --color-text: #ffffff;
  --color-accent: #4c9eb2;
  --color-accent-subtle: rgba(76, 158, 178, 0.2);
  --color-teal: #14979e;
  --color-purple: #6e73ab;
  --color-magenta: #cc20f8;
  --color-gray-section: #9da6af;
  --color-card: #22262a;
  --color-border: #353b42;
  --cover-bg: linear-gradient(135deg, #0f1823 0%, #0a0c0d 100%);
  --section-bg: linear-gradient(135deg, #1a3d50 0%, #0a1520 100%);
  --section-title-color: #ffffff;
  --logo-circle: #ffffff;
  --color-cover-title: #ffffff;
  --code-bg: #282c34;
}

html:not(.dark) {
  --color-bg: #f1f2f4;
  --color-text: #0a0c0d;
  --color-accent: #366f7d;
  --color-accent-subtle: rgba(54, 111, 125, 0.2);
  --color-teal: #14979e;
  --color-purple: #6e73ab;
  --color-magenta: #cc20f8;
  --color-gray-section: #505962;
  --color-card: #ffffff;
  --color-border: #d1d5db;
  --cover-bg: var(--color-bg);
  --section-bg: linear-gradient(135deg, #366f7d 0%, #1a4d5a 100%);
  --section-title-color: #ffffff;
  --logo-circle: #0a0c0d;
  --color-cover-title: var(--color-accent);
  --code-bg: #ffffff;
}

:root {
  --font-family: Arial, sans-serif;
  --font-size-title1: 51px;
  --font-size-title2: 35px;
  --font-size-subtitle: 19px;
  --font-size-section: 11px;
  --font-size-body: 14px;
}