:root {
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Geist', sans-serif;

  /* Palette */
  --text-50: #f0f3f4;
  --text-100: #e1e6ea;
  --text-200: #c3ced5;
  --text-300: #a5b5c0;
  --text-400: #889caa;
  --text-500: #6a8495;
  --text-600: #556977;
  --text-700: #3f4f5a;
  --text-800: #2a353c;
  --text-900: #151a1e;
  --text-950: #0b0d0f;

  --background-50: #eff1f5;
  --background-100: #e0e4eb;
  --background-200: #c0c8d8;
  --background-300: #a1adc4;
  --background-400: #8291b0;
  --background-500: #62769d;
  --background-600: #4f5e7d;
  --background-700: #3b475e;
  --background-800: #272f3f;
  --background-900: #14181f;
  --background-950: #0a0c10;

  --primary-50: #e6f1ff;
  --primary-100: #cde4fe;
  --primary-200: #9bc9fd;
  --primary-300: #68aefd;
  --primary-400: #3692fc;
  --primary-500: #0477fb;
  --primary-600: #035fc9;
  --primary-700: #024897;
  --primary-800: #023064;
  --primary-900: #011832;
  --primary-950: #000c19;

  --secondary-50: #f4eef6;
  --secondary-100: #e8ddee;
  --secondary-200: #d1bcdc;
  --secondary-300: #bb9acb;
  --secondary-400: #a478ba;
  --secondary-500: #8d57a8;
  --secondary-600: #714587;
  --secondary-700: #553465;
  --secondary-800: #382343;
  --secondary-900: #1c1122;
  --secondary-950: #0e0911;

  --accent-50: #f6ecf8;
  --accent-100: #edd9f2;
  --accent-200: #dcb3e5;
  --accent-300: #ca8dd8;
  --accent-400: #b967cb;
  --accent-500: #a741be;
  --accent-600: #863498;
  --accent-700: #642772;
  --accent-800: #431a4c;
  --accent-900: #210d26;
  --accent-950: #110713;

  --navbar-bg: #ffffff;
  --header-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
}
header .logo-light { display: block; }
header .logo-dark { display: none; }

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --text-50: #0b0d0f;
    --text-100: #151a1e;
    --text-200: #2b353b;
    --text-300: #404f59;
    --text-400: #566976;
    --text-500: #6b8494;
    --text-600: #899ca9;
    --text-700: #a6b5bf;
    --text-800: #c4ced4;
    --text-900: #e1e6ea;
    --text-950: #f0f3f4;

    --background-50: #0a0c0f;
    --background-100: #14181f;
    --background-200: #29303d;
    --background-300: #3d475c;
    --background-400: #525f7a;
    --background-500: #667799;
    --background-600: #8592ad;
    --background-700: #a3adc2;
    --background-800: #c2c9d6;
    --background-900: #e0e4eb;
    --background-950: #f0f1f5;

    --primary-50: #000c19;
    --primary-100: #011832;
    --primary-200: #023064;
    --primary-300: #024897;
    --primary-400: #035fc9;
    --primary-500: #0477fb;
    --primary-600: #3692fc;
    --primary-700: #68aefd;
    --primary-800: #9bc9fd;
    --primary-900: #cde4fe;
    --primary-950: #e6f1ff;

    --secondary-50: #0e0911;
    --secondary-100: #1c1122;
    --secondary-200: #382343;
    --secondary-300: #553465;
    --secondary-400: #714587;
    --secondary-500: #8d57a8;
    --secondary-600: #a478ba;
    --secondary-700: #bb9acb;
    --secondary-800: #d1bcdc;
    --secondary-900: #e8ddee;
    --secondary-950: #f4eef6;

    --accent-50: #110713;
    --accent-100: #210d26;
    --accent-200: #431a4c;
    --accent-300: #642772;
    --accent-400: #863498;
    --accent-500: #a741be;
    --accent-600: #b967cb;
    --accent-700: #ca8dd8;
    --accent-800: #dcb3e5;
    --accent-900: #edd9f2;
    --accent-950: #f6ecf8;

    --navbar-bg: #1e232d;
    --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  header .logo-light { display: none; }
  header .logo-dark { display: block; }
}




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

html {
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: var(--background-50);
  color: var(--text-950);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
}


body > header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 99980;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 192px 20px 1fr 20px 192px;
  grid-template-columns: 192px 1fr 192px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  padding: 0 20px;
  background-color: var(--navbar-bg);
  color: var(--text-950);
  -webkit-box-shadow: var(--header-shadow);
          box-shadow: var(--header-shadow);
}

body > header .logo {
  width: 192px;
  height: 40px;
}

body > header .pages-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}

body > header .pages-container a {
  padding: 8px 12px;
  border-radius: 8px;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body > header .pages-container a:hover {
  color: var(--primary-950);
  background-color: var(--background-50);
}

body > header .account-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
}

.theme-toggle-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--text-800);
  background-color: var(--background-100);
  color: var(--text-950);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.theme-toggle-btn:hover {
  background-color: var(--background-200);
  border-color: var(--text-700);
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
}

.theme-toggle-btn:active {
  -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
          transform: scale(0.97);
}

.theme-toggle-btn svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

body > main {
  margin-top: 60px;
}

body > footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 12px;
  background-color: var(--background-100);
  color: var(--text-400);
}
body > footer p {
  margin: 0;
}
footer a {
  color: var(--text-400);
  text-decoration: underline;
}


.lang-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 13px;
}
.lang-switcher span {
  color: var(--text-300);
}
.lang-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--text-400);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.lang-btn:hover {
  color: var(--text-950);
}
.lang-btn.active {
  color: var(--primary-500);
  font-weight: 700;
}