/* Dark theme (default) */
:root {
  /* Purple scale */
  --p900: #0d0820;
  --p800: #1a1040;
  --p700: #26185a;
  --p600: #3a2490;
  --p500: #5b3bbf;
  --p400: #7c5ce0;
  --p300: #a78df0;
  --p200: #c8b5f7;
  --p100: #e8e0fc;

  /* Accent */
  --acc: #b06cfb;
  --acc2: #ff6eb4;

  /* Text */
  --wh: #fff;
  --mu: rgba(255, 255, 255, 0.52);
  --mi: rgba(255, 255, 255, 0.82);

  /* Surfaces */
  --bg: var(--p900);
  --card: rgba(255, 255, 255, 0.03);
  --border-c: rgba(176, 108, 251, 0.13);
  --border-h: rgba(176, 108, 251, 0.36);
  --sec-s: var(--mu);
  --step-h: rgba(255, 255, 255, 0.05);

  /* Component-specific */
  --who-rb: rgba(124, 92, 224, 0.26);
  --who-hb: rgba(201, 85, 138, 0.26);
  --tbadge-bg: rgba(255, 255, 255, 0.03);
  --tbadge-b: rgba(176, 108, 251, 0.12);
  --dl-bg: rgba(255, 255, 255, 0.03);
  --dl-b: rgba(176, 108, 251, 0.17);
  --foot-b: rgba(176, 108, 251, 0.1);
  --mmenu-bg: rgba(13, 8, 32, 0.97);

  /* Nav */
  --nav-bg-idle: rgba(13, 8, 32, 0.6);
  --nav-bg-scroll: rgba(13, 8, 32, 0.95);
  --nav-border: rgba(176, 108, 251, 0.1);
}

/* Light theme */
html[data-theme="light"] {
  --p900: #f4f0ff;
  --p800: #e8e0fc;
  --p700: #c8b5f7;
  --p600: #3a2490;
  --p500: #5b3bbf;
  --p400: #7c5ce0;
  --p300: #5b3bbf;
  --p200: #3a2490;
  --p100: #26185a;
  --acc: #7c5ce0;
  --acc2: #c9558a;
  --wh: #1a0840;
  --mu: rgba(26, 8, 64, 0.52);
  --mi: rgba(26, 8, 64, 0.82);
  --bg: #f8f5ff;
  --card: #fff;
  --border-c: rgba(124, 92, 224, 0.16);
  --border-h: rgba(124, 92, 224, 0.42);
  --sec-s: rgba(26, 8, 64, 0.52);
  --step-h: #ede8ff;
  --who-rb: rgba(124, 92, 224, 0.2);
  --who-hb: rgba(201, 85, 138, 0.2);
  --tbadge-bg: rgba(124, 92, 224, 0.05);
  --tbadge-b: rgba(124, 92, 224, 0.16);
  --dl-bg: #fff;
  --dl-b: rgba(124, 92, 224, 0.2);
  --foot-b: rgba(124, 92, 224, 0.14);
  --mmenu-bg: rgba(248, 245, 255, 0.97);
  --nav-bg-idle: rgba(248, 245, 255, 0.85);
  --nav-bg-scroll: rgba(248, 245, 255, 0.97);
  --nav-border: rgba(124, 92, 224, 0.14);
}