/* ============ DARK: deep space ============ */
:root{
  --bg:radial-gradient(125% 115% at 50% -8%, #171b28 0%, #0a0c14 48%, #05060b 100%);
  --panel-bg:rgba(22,26,38,.30);
  --panel-img:linear-gradient(152deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 38%,
              rgba(255,255,255,.01) 62%,rgba(255,255,255,.07) 100%);
  --panel-blur:blur(64px) saturate(210%) brightness(1.06);
  --panel-line:rgba(255,255,255,.15);
  --panel-radius:32px;
  --panel-shadow:0 44px 110px -26px rgba(0,0,0,.82);
  --glass-top:rgba(255,255,255,.24);
  --glass-bot:rgba(255,255,255,.05);
  --tx:#f2f4f8; --tx-2:rgba(255,255,255,.72); --tx-3:rgba(255,255,255,.40);
  --lab:rgba(255,255,255,.90); --lab-shadow:0 1px 14px rgba(0,0,0,.9);
  --hover:rgba(255,255,255,.07);
  --chip:rgba(255,255,255,.06); --chip-line:rgba(255,255,255,.14);
  --rival:#e8607a;
  --accent:#8b7cf6;
  --accent-2:#2fc9b4;
  --caution-bg:rgba(232,140,80,.09); --caution-line:rgba(232,140,80,.30); --caution-ic:#e8a468;
  --anchor-bg:rgba(255,255,255,.035); --anchor-line:rgba(255,255,255,.13);
  --reveal-bg:rgba(139,124,246,.10); --reveal-line:rgba(139,124,246,.35);
  --q-line:rgba(255,255,255,.55);
  --rule:rgba(255,255,255,.10);
  --grain:0;
  --edit-line:rgba(255,255,255,.20);
  --edit-bg:rgba(255,255,255,.05);
  --viewer-scrim:rgba(5,6,11,.72);
  --doc-page-bg:#fbfaf7; --doc-ink:#26221c; --doc-ink-2:#4a453c; --doc-ink-3:#8c8578;
  --doc-rule:#e4dfd4;
  /* An opaque fallback for the handful of things the browser draws itself
     rather than the page -- a <select>'s dropped-down option list chief among
     them. Those get no backdrop-filter, since they are not part of the page's
     paint at all, so the glass panel's translucent tones would composite
     against whatever the OS puts behind a native popup instead of the app --
     usually a flat white, which is the "not in theme" the dropdown showed. */
  --ctrl-solid:#181b26; --ctrl-solid-tx:#eef0f6;
}
/* ============ LIGHT: warm paper ============ */
body.light{
  --bg:radial-gradient(130% 120% at 50% -10%, #fffaf0 0%, #faf3e3 42%, #f1e6cf 78%, #e9dabe 100%);
  --panel-bg:rgba(255,252,244,.86);
  --panel-img:linear-gradient(164deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 40%,
              rgba(255,255,255,.03) 70%,rgba(255,251,240,.30) 100%);
  --panel-blur:blur(28px) saturate(140%);
  --panel-line:rgba(120,94,54,.14);
  --panel-radius:22px;
  --panel-shadow:0 1px 2px rgba(94,72,36,.06), 0 30px 60px -22px rgba(94,72,36,.22),
                 0 4px 14px -6px rgba(94,72,36,.10);
  --glass-top:rgba(255,255,255,.85);
  --glass-bot:rgba(148,114,64,.06);
  --tx:#332a1e; --tx-2:rgba(51,42,30,.74); --tx-3:rgba(51,42,30,.46);
  --lab:#3a2f21; --lab-shadow:0 0 10px rgba(250,243,227,.95),0 0 3px rgba(250,243,227,1);
  --hover:rgba(120,86,40,.06);
  --chip:rgba(120,86,40,.05); --chip-line:rgba(120,94,54,.18);
  --rival:#a8455a;
  --accent:#7a5cd6;
  --accent-2:#0e8a72;
  --caution-bg:rgba(196,112,42,.08); --caution-line:rgba(196,112,42,.28); --caution-ic:#a85f26;
  --anchor-bg:rgba(120,94,54,.045); --anchor-line:rgba(120,94,54,.16);
  --reveal-bg:rgba(122,92,214,.07); --reveal-line:rgba(122,92,214,.28);
  --q-line:rgba(51,42,30,.30);
  --rule:rgba(120,94,54,.14);
  --grain:.30;
  --edit-line:rgba(74,60,38,.28);
  --edit-bg:rgba(120,100,70,.05);
  --viewer-scrim:rgba(60,48,28,.34);
  --doc-page-bg:#fbfaf7; --doc-ink:#26221c; --doc-ink-2:#4a453c; --doc-ink-3:#8c8578;
  --doc-rule:#e4dfd4;
  --ctrl-solid:#fbf6ea; --ctrl-solid-tx:#332a1e;
}
*{margin:0;padding:0;box-sizing:border-box}
