: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:#efe7ff;
  --bg1:#e9efff;
  --bg2:#ffe8f8;
  --dreamA: rgba(165,210,255,.76);
  --dreamB: rgba(255,191,232,.70);
  --dreamC: rgba(214,196,255,.74);
  --dreamD: rgba(205,244,255,.48);
  --dreamE: rgba(255,241,210,.36);
  --dreamCenter: rgba(226,209,255,.60);
  --dreamCenterSoft: rgba(198,232,255,.46);
  --dreamFlow: rgba(255,208,240,.42);
  --safeBleedA: rgba(176,224,255,.34);
  --safeBleedB: rgba(255,205,236,.30);
  --safeBleedC: rgba(223,210,255,.30);
  --safeBleedD: rgba(255,238,220,.18);

  --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,.30);
  --navBorder: rgba(255,255,255,.48);

  --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:#0f1538;
  --bg1:#152152;
  --bg2:#341d63;
  --dreamA: rgba(122,156,255,.48);
  --dreamB: rgba(196,116,255,.42);
  --dreamC: rgba(255,111,199,.38);
  --dreamD: rgba(107,206,255,.34);
  --dreamE: rgba(255,228,245,.18);
  --dreamCenter: rgba(130,104,255,.46);
  --dreamCenterSoft: rgba(96,188,255,.34);
  --dreamFlow: rgba(255,126,210,.28);
  --safeBleedA: rgba(92,172,255,.22);
  --safeBleedB: rgba(204,118,255,.18);
  --safeBleedC: rgba(132,110,255,.18);
  --safeBleedD: rgba(255,126,210,.08);

  --text:rgba(255,255,255,.95);
  --muted:rgba(255,255,255,.74);
  --faint:rgba(255,255,255,.48);

  --glass: rgba(30,38,78,.44);
  --glass2: rgba(30,38,78,.28);
  --border: rgba(188,196,255,.14);
  --border2: rgba(188,196,255,.10);

  --shadow: 0 24px 62px rgba(2,4,16,.34);
  --shadow2: 0 12px 34px rgba(2,4,16,.26);

  --btn: rgba(34,42,82,.42);
  --btnBorder: rgba(188,196,255,.14);
  --btnShadow: 0 16px 40px rgba(2,4,16,.28);

  --navBg: rgba(18,23,54,.34);
  --navBorder: rgba(188,196,255,.14);

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

  --particle: rgba(255,255,255,.52);
  --particleLine: rgba(255,255,255,.12);

  --grainOpacity:.06;
}

/* Global smooth theme transition */
html, body{
  min-height:100%;
  background-color: var(--bg1);
  background-image:
    radial-gradient(72% 54% at 50% 18%, rgba(226,214,255,.34), transparent 74%),
    radial-gradient(70% 56% at 18% 64%, var(--safeBleedA), transparent 76%),
    radial-gradient(70% 56% at 82% 66%, var(--safeBleedB), transparent 76%),
    radial-gradient(82% 62% at 50% 86%, var(--safeBleedC), transparent 74%),
    radial-gradient(48% 36% at 50% 50%, var(--safeBleedD), transparent 78%),
    linear-gradient(145deg, var(--bg0) 0%, var(--bg1) 50%, var(--bg2) 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
}

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:
    radial-gradient(130% 150% at 0% 0%, rgba(115,148,255,.16), transparent 42%),
    radial-gradient(120% 140% at 100% 100%, rgba(255,108,194,.11), transparent 48%),
    radial-gradient(100% 120% at 24% 86%, rgba(186,107,255,.10), transparent 50%),
    linear-gradient(180deg, rgba(21,28,62,.66), rgba(10,15,36,.58)),
    rgba(16,20,46,.34);
  border-color: rgba(188,196,255,.13);
  box-shadow:
    0 24px 62px rgba(2,4,16,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}