:root {
  /* Backgrounds - Light mode with teal hints */
  --color-bg: 255 255 255;
  --color-border: 255 255 255;
  --color-box: 248 250 252;
  --box-border: 226 232 240;
  --box-sd: 0 139 139 / 0.08;

  /* Headings - Teal corporate colors */
  --heading-1: 0 117 117;
  --heading-2: 0 95 95;
  --heading-3: 71 85 105;

  /* Brand colors */
  --brand-primary: 0 139 139;
  --brand-accent: 220 38 38;
  --brand-highlight: 34 211 238;

  /* Gradient colors */
  --gradient-start: 0 117 117;
  --gradient-end: 0 163 163;
}

.dark {
  /* Backgrounds - Dark mode */
  --color-bg: 15 23 42;
  --color-box: 30 41 59;
  --box-border: 148 163 184 / 0.1;
  --box-sd: transparent;

  /* Headings - Light text on dark */
  --heading-1: 230 247 247;
  --heading-2: 179 232 232;
  --heading-3: 203 213 225;

  /* Brand colors for dark mode */
  --brand-primary: 38 186 186;
  --brand-accent: 252 165 165;
  --brand-highlight: 103 232 249;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Raleway", sans-serif;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  /* border: 2px solid rgba(255, 255, 255, 0.1); */
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  /* padding: 30px 30px 30px 30px; */
}