/* Design tokens: the only colors components may use. Values are the design prototype's
   (meadowink-app.html). theme-apply.js sets the four theme inputs from the active loadout. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500;600&display=swap");

:root{
  color-scheme:dark;
  /* theme inputs (set by the active loadout) */
  --bg:#0b0e19;
  --accent:#7b55d9;
  --accent-2:#c85e93;
  --gold:#dcbd7e;
  /* loadout extras: UI-color tint for surfaces, title font */
  --tint:var(--accent);
  --title-font:var(--serif);
  /* derived neutrals: dark */
  --bg-2:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 2%),var(--tint) 3%);
  --surface:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 5%),var(--tint) 6%);
  --surface-2:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 8%),var(--tint) 7%);
  --surface-3:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 12%),var(--tint) 8%);
  --line:rgba(226,228,255,.07);
  --line-soft:rgba(226,228,255,.035);
  --line-2:rgba(226,228,255,.13);
  --line-3:rgba(226,228,255,.22);
  --hover:rgba(255,255,255,.04);
  --rule:rgba(226,228,255,.035);
  --text:#eceaf4;
  --muted:#9c9db6;
  --faint:#646884;
  --accent-hi:color-mix(in srgb,var(--accent) 85%,#fff);
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --accent-text:color-mix(in srgb,var(--accent) 55%,#fff);
  --note-a:#262033;--note-b:#1d1a2a;
  --shadow:rgba(0,0,0,.7);
  --danger:#d46a6a;
  --success:#77b388;
  --grad:linear-gradient(90deg,var(--accent),var(--accent-2));
  --serif:"Newsreader",Georgia,serif;
  --sans:Inter,system-ui,sans-serif;
  /* radius scale (loadout corners: round = these values, sharp = tighter) */
  --r-xs:5px;--r-sm:7px;--r:8px;--r-md:10px;--r-lg:12px;--r-xl:14px;--r-2xl:16px;
}
/* light mode: same loadout, paper-light neutrals */
:root[data-mode="light"]{
  color-scheme:light;
  --bg-2:color-mix(in srgb,var(--bg),#fff 45%);
  --surface:#ffffff;
  --surface-2:color-mix(in srgb,var(--bg) 70%,#fff);
  --surface-3:color-mix(in srgb,color-mix(in srgb,var(--bg) 80%,#fff),var(--tint) 8%);
  --line:rgba(28,24,60,.08);
  --line-soft:rgba(28,24,60,.05);
  --line-2:rgba(28,24,60,.14);
  --line-3:rgba(28,24,60,.24);
  --hover:rgba(28,24,60,.04);
  --rule:rgba(60,70,140,.07);
  --text:#1c1a2b;
  --muted:#5b5870;
  --faint:#8c89a0;
  --accent-hi:color-mix(in srgb,var(--accent) 88%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,transparent);
  --accent-text:color-mix(in srgb,var(--accent) 88%,#000);
  --note-a:#fdfaf2;--note-b:#f3eee2;
  --shadow:rgba(40,30,80,.18);
}
:root[data-corners="sharp"]{--r-xs:2px;--r-sm:3px;--r:4px;--r-md:4px;--r-lg:5px;--r-xl:6px;--r-2xl:6px}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  transition:background-color .3s,border-color .3s,color .3s}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
svg{display:block}
img{max-width:100%}
[hidden]{display:none!important}
.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}