:root{
  --bg: #ffffff;
  --text: #111111;
  --surface: #f5f5f5;
  --border: rgba(0,0,0,.15);

  --accent: #4c93fb;
  --accent-2: #1f6fe5;

  --nav-bg: rgba(255,255,255,.75);

  /* Section backgrounds */
  --section-1: #f8f9fa;
  --section-2: #f5f5f5;
  --section-3: #e9ecef;
  --footer-bg: #000000;

  /* Brand colors */
  --brand-primary: #007bff;
  --brand-secondary: #4c93fb;
  --brand-tertiary: #d81b60;
  --brand-success: #4caf50;
  --brand-warning: #ff5722;

  /* Text variants */
  --title-color: #212529;
  --logo-color: #333333;

  /* Effects */
  --shadow-soft: 0 4px 16px rgba(0,0,0,.2);
  --shadow-strong: 0 0 40px rgba(0,0,0,.35);
}

body.dark-mode{
  --bg: #121212;
  --text: #e6e6e6;
  --surface: #1c1c1c;
  --border: rgba(255,255,255,.12);

  --accent: #4c93fb;
  --accent-2: #7ab0ff;

  --nav-bg: rgba(20,20,20,.8);

  --section-1: #2c3e50;
  --section-2: #222222;
  --section-3: #444444;
  --footer-bg: #000000;

  --title-color: #e6e6e6;
  --logo-color: #f0f0f0;

  --shadow-soft: 0 4px 16px rgba(255,255,255,.08);
  --shadow-strong: 0 0 40px #34dde4;
}

html.dark-mode{
  --bg: #121212;
  --text: #e6e6e6;
  --surface: #1c1c1c;
  --border: rgba(255,255,255,.12);

  --accent: #4c93fb;
  --accent-2: #7ab0ff;

  --nav-bg: rgba(20,20,20,.8);

  --section-1: #2c3e50;
  --section-2: #222222;
  --section-3: #444444;
  --footer-bg: #000000;

  --title-color: #e6e6e6;
  --logo-color: #f0f0f0;

  --shadow-soft: 0 4px 16px rgba(255,255,255,.08);
  --shadow-strong: 0 0 40px #34dde4;
}