/* Design tokens: the only colors components may use. Values are the design prototype's
   (bayou-app.html). theme-apply.js sets the four theme inputs from the active loadout. */
@import url("/site-appearance/css-styles/scene-themes.css");
@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");

/* Super Mario 256 by fsuarez913 (dafont, 100% free) for the Bayou wordmark */
@font-face{
  font-family:"Super Mario 256";
  src:url("/site-appearance/fonts/super-mario-256.ttf") format("truetype");
  font-display:swap;
}

:root{
  color-scheme:dark;
  /* Theme inputs (set by the active loadout). Super Mario Galaxy in space:
       deep space   #020410  the page, which is just space
       galaxy blue  #2e6cff  the primary accent
       star gold    #ffc93c  the warm accent
       star light   #ffe27a  gilt, when the light catches something
     The surfaces stay deep navy. Blue and gold show up as living things,
     not as the color of the room. */
  --bg:#020410;
  --accent:#2e6cff;
  --accent-2:#ffc93c;
  --gold:#ffe27a;
  /* 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 2.5%);
  /* loadout extras: UI-color tint for surfaces, sitewide font */
  --tint:var(--accent);
  --title-font:"Super Mario 256",var(--serif);
  /* derived neutrals: dark. Panels sit only a little above the page so they stay dim. */
  --bg-2:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 1.5%),var(--tint) 2%);
  --surface:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 3.5%),var(--tint) 4%);
  --surface-2:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 6%),var(--tint) 5%);
  --surface-3:color-mix(in srgb,color-mix(in srgb,var(--bg),#fff 9%),var(--tint) 6%);
  /* hairlines are starlight, not a green edge */
  --line:rgba(170,190,255,.08);
  --line-soft:rgba(170,190,255,.04);
  --line-2:rgba(170,190,255,.15);
  --line-3:rgba(170,190,255,.24);
  --hover:rgba(255,255,255,.04);
  --rule:rgba(214,238,222,.035);
  --text:#f2f5ff;
  --muted:#a9b4d6;
  --faint:#8590b8;      /* clears 4.5:1 on deep space */
  --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);
  /* notes are the themed page with a faint warm cast, so they follow the gradient theme */
  --note-a:color-mix(in srgb,var(--surface),var(--gold) 3%);--note-b:color-mix(in srgb,var(--surface-2),var(--gold) 3%);
  --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;
}
/* moody: a mid-tone room in a muted version of the colour, neither dark nor light. The header sits a step below the page,
   panels a step above it; text keeps 4.5:1 on all three. */
:root[data-mode="moody"]{
  color-scheme:dark;
  --chrome:color-mix(in oklab,var(--bg),#000 15%);
  --bg-2:color-mix(in oklab,var(--bg),#000 8%);
  --surface:color-mix(in oklab,var(--bg),#fff 9%);
  --surface-2:color-mix(in oklab,var(--bg),#fff 13%);
  --surface-3:color-mix(in oklab,var(--bg),#fff 17%);
  --line:rgba(255,255,255,.1);
  --line-soft:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.17);
  --line-3:rgba(255,255,255,.27);
  --hover:rgba(255,255,255,.06);
  --rule:rgba(255,255,255,.05);
  --text:#f7f5fa;
  --muted:#dddbe5;
  --faint:#d6d4df;
  --accent-hi:color-mix(in srgb,var(--accent) 80%,#fff);
  --accent-soft:color-mix(in srgb,var(--accent) 22%,transparent);
  --accent-text:color-mix(in srgb,var(--accent) 40%,#fff);
  --shadow:rgba(0,0,0,.4);
}
/* 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:color-mix(in srgb,var(--surface),var(--gold) 6%);--note-b:color-mix(in srgb,var(--surface-2),var(--gold) 6%);
  --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}