/* Design tokens: the only colors components may use. Values are the design prototype's
   (starstudio-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). A forest in space:
       void        #08090d  the page, which is just space
       fern        #3f9b6a  a tree, and the primary accent
       bark        #8b5a2b  wood brown, where the orange used to be
       low sun     #f0c979  gilt, when the light catches something
     The surfaces stay the void. Green and warm show up as living things,
     not as the color of the room. */
  --bg:#08090d;
  --accent:#3f9b6a;
  --accent-2:#8b5a2b;
  --gold:#f0c979;
  /* site accent: top bar only. Falls back to the loadout accent. */
  --bar:var(--accent);
  --bar-2:var(--accent-2);
  --bar-soft:color-mix(in srgb,var(--bar) 16%,transparent);
  /* solid on purpose: no two-colour gradients anywhere */
  --bar-grad:var(--bar);
  /* header fill tracks the page, not the panel color */
  --chrome:color-mix(in srgb,var(--bg),#fff 5%);
  /* loadout extras: UI-color tint for surfaces, sitewide 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%);
  /* hairlines are starlight, not a green edge */
  --line:rgba(220,226,236,.07);
  --line-soft:rgba(220,226,236,.035);
  --line-2:rgba(220,226,236,.13);
  --line-3:rgba(220,226,236,.22);
  --hover:rgba(255,255,255,.04);
  --rule:rgba(214,238,222,.035);
  --text:#e8e6e1;
  --muted:#a8adb6;
  --faint:#8e939e;      /* clears 4.5:1 on the void */
  --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:#141820;--note-b:#10131a;
  --shadow:rgba(0,0,0,.7);
  /* Both of these have to stay legible as status next to a green accent and a
     warm one, so danger sits clearly redder than first light and success sits
     clearly brighter than fern. */
  --danger:#e06a66;
  --success:#8fd6a0;
  --grad:var(--accent);
  --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: the same forest an hour later, dawn mist instead of shadow */
:root[data-mode="light"]{
  color-scheme:light;
  --bar-soft:color-mix(in srgb,var(--bar) 14%,transparent);
  --chrome:color-mix(in srgb,var(--bg),#fff 42%);
  --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(18,38,26,.08);
  --line-soft:rgba(18,38,26,.05);
  --line-2:rgba(18,38,26,.14);
  --line-3:rgba(18,38,26,.24);
  --hover:rgba(18,38,26,.04);
  --rule:rgba(40,80,56,.07);
  --text:#13231a;
  --muted:#4e6256;
  --faint:#5d7165;
  --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:#fbfaf0;--note-b:#eef0e0;
  --shadow:rgba(20,45,30,.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}