:root{
  --radius:16px;
  --radius-lg:24px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --u1:#a14cff;
  --u2:#ff5fb0;
  --u3:#ffd1ff;

  /* Light (default) */
  --bg0:#fbf2ff;
  --bg1:#efe6ff;
  --bg2:#fff0dc;

  --text:#171625;
  --muted:rgba(23,22,37,.68);
  --faint:rgba(23,22,37,.44);

  --glass: rgba(255,255,255,.60);
  --glass2: rgba(255,255,255,.44);
  --border: rgba(255,255,255,.56);
  --border2: rgba(23,22,37,.12);

  --shadow: 0 18px 50px rgba(34,20,88,.14);
  --shadow2: 0 10px 30px rgba(34,20,88,.10);

  --btn: rgba(255,255,255,.56);
  --btnBorder: rgba(23,22,37,.12);
  --btnShadow: 0 12px 30px rgba(34,20,88,.12);

  /* Slightly lighter glass so background particles remain visible behind the header/nav */
  --navBg: rgba(255,255,255,.32);
  --navBorder: rgba(255,255,255,.44);

  --chartGrid: rgba(23,22,37,.12);

  --particle: rgba(30,26,45,.45);
  --particleLine: rgba(30,26,45,.12);

  /* Keep the texture subtle on light backgrounds (avoid a "dirty" overlay feeling). */
  --grainOpacity:.04;

  /* Transition */
  --themeDur: 1500ms;
}

:root[data-theme="dark"]{
  --bg0:#0c1021;
  --bg1:#121832;
  --bg2:#191433;

  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.70);
  --faint:rgba(255,255,255,.46);

  --glass: rgba(20,24,44,.54);
  --glass2: rgba(20,24,44,.40);
  --border: rgba(255,255,255,.13);
  --border2: rgba(255,255,255,.09);

  --shadow: 0 22px 60px rgba(0,0,0,.42);
  --shadow2: 0 12px 36px rgba(0,0,0,.32);

  --btn: rgba(28,34,58,.52);
  --btnBorder: rgba(255,255,255,.14);
  --btnShadow: 0 16px 44px rgba(0,0,0,.36);

  --navBg: rgba(16,20,38,.46);
  --navBorder: rgba(255,255,255,.10);

  --chartGrid: rgba(255,255,255,.11);

  --particle: rgba(255,255,255,.58);
  --particleLine: rgba(255,255,255,.15);

  --grainOpacity:.08;
}

/* Global smooth theme transition */
html, body{
  background: var(--bg1);
}

body, .glass, .card, .statusCard, .chartCard, .notice, .metaCard, .formCard, .contactCard, .drawer__panel, .cmd__panel, .modal__panel, .header__row, .nav, .btn, .iconBtn, .themeToggle__track, .themeToggle__orb, .chip, .pill, .nav__item, .section__kicker, .detailPanel, .detailFeature, .bioCard{
  transition:
    background-color var(--themeDur) var(--ease),
    color var(--themeDur) var(--ease),
    border-color var(--themeDur) var(--ease),
    box-shadow var(--themeDur) var(--ease),
    transform 280ms var(--ease);
}

@media (prefers-reduced-motion: reduce){
  :root{ --themeDur: 0ms; }
}

:root[data-theme="dark"] .header__row,
:root[data-theme="dark"] .nav,
:root[data-theme="dark"] .metaCard,
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .statusCard,
:root[data-theme="dark"] .bioCard,
:root[data-theme="dark"] .detailCard,
:root[data-theme="dark"] .drawer__panel,
:root[data-theme="dark"] .cmd__panel,
:root[data-theme="dark"] .modal__panel{
  background:
    linear-gradient(180deg, rgba(20,24,46,.76), rgba(10,13,30,.70)),
    rgba(16,19,38,.54);
  border-color: rgba(255,255,255,.11);
  box-shadow:
    0 22px 58px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06);
}