/* Bellwether — the parts every page shares.

   Everything here is lifted from the app, not designed alongside it:
   the three palettes are lib/core/theme/bw_palette.dart and app_colors.dart
   token for token, the type is the two families the app bundles
   (lib/app/app_fonts.dart), and the sizes keep AppText's two rules — nothing
   under 13px, and reading text at 17. When the app's palette changes, this
   file is the one place the site has to follow it.

   Page-specific layout stays in each page's own <style>. */

/* ---------- type ----------
   Literata for headings, names and figures; Be Vietnam Pro for everything
   read as a sentence. Served from this site, never from a font CDN, for the
   same reason app_fonts.dart takes the network away: a visitor's address
   should not reach a third party before they have read a word. The files
   are the app's own bundled weights, subset to Latin. */
@font-face{ font-family:"Literata"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/Literata-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/Literata-Medium.woff2") format("woff2"); }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/Literata-SemiBold.woff2") format("woff2"); }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/Literata-Bold.woff2") format("woff2"); }
@font-face{ font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/BeVietnamPro-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Be Vietnam Pro"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/BeVietnamPro-Medium.woff2") format("woff2"); }

/* ---------- the three modes ----------
   Light is the default: it is what a first visit sees, whatever the system
   setting, and what the page falls back to without script. The picker in the
   top bar (assets/site.js) switches to Ember or Midnight and remembers it; the
   inline script in each page's <head> applies a remembered pick before first
   paint. */
:root{
  /* Light — Ember on warm paper: the dark mode's ink becomes the page, and
     every hue is deepened just enough to stay legible on it. */
  --bg-top:#F8E3C2; --bg-base:#F7F1E7;
  --ink:#2A1F12; --ink-2:rgba(42,31,18,.74); --ink-3:rgba(42,31,18,.58);
  --surface:rgba(255,255,255,.72); --surface-2:rgba(42,31,18,.06);
  --border:rgba(42,31,18,.12); --border-strong:rgba(42,31,18,.26);
  --accent:#A9661A; --accent-soft:#9A5B14; --on-accent:#FFFBF4;

  --good:#17936A; --on-good:#FFFFFF;
  --alert:#8A4B33; --warn:#8A4B33; --caution:#9C7A00;

  --sleep:#B87A26; --steps:#9C7A45; --exercise:var(--good); --stress:var(--warn);
  --calories:#BF6A45; --cycle:#BA5E76; --heart:#A0523F; --spo2:#1590B2;
  --stage-deep:#8A5A1E; --stage-core:#C98A2E; --stage-rem:#E6C488;

  --win:#E07A1F; --perfect:var(--good); --custom:#6B58EE; --super:#D9A300;

  --shell:#2A1F12;
  --sb-thumb:rgba(42,31,18,.20); --sb-thumb-hover:rgba(42,31,18,.36);
  --shadow:rgba(60,40,15,.32);
  color-scheme:light;

  --display:"Literata","Iowan Old Style",Georgia,serif;
  --text:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;

  --measure:64ch;
  --r-lg:22px; --r-md:14px; --r-sm:9px;
}

/* What the two dark modes share: the signal and celebration hues at full
   strength, as BwPalette and AppColors give them whenever isDark. */
[data-mode="ember"],[data-mode="midnight"]{
  --good:#54D8A8; --on-good:#08170F; --alert:#F08A6C;
  --heart:#E85C6B; --spo2:#22B4D8;
  --win:#F2994A; --custom:#8C7BFF; --super:#FFD60A;
  --shadow:rgba(0,0,0,.85);
  color-scheme:dark;
}

/* Ember — warm ink, amber on dark. */
[data-mode="ember"]{
  --bg-top:#2A2015; --bg-base:#14100A;
  --ink:#F6EFE4; --ink-2:rgba(246,239,228,.74); --ink-3:rgba(246,239,228,.58);
  --surface:rgba(246,239,228,.045); --surface-2:rgba(246,239,228,.09);
  --border:rgba(246,239,228,.10); --border-strong:rgba(246,239,228,.22);
  --accent:#EDB35C; --accent-soft:#F5C77E; --on-accent:#1A1206;

  --warn:#F08A6C; --caution:#E8C547;

  --sleep:#F0BE72; --steps:#DFC89C;
  --calories:#E06A4E; --cycle:#D98A9C;
  --stage-deep:#B87E36; --stage-core:#EDB35C; --stage-rem:#F3DCB2;

  --shell:#0C0906;
  --sb-thumb:rgba(246,239,228,.16); --sb-thumb-hover:rgba(246,239,228,.30);
}

/* Midnight — cool low light, periwinkle where Ember is amber. */
[data-mode="midnight"]{
  --bg-top:#1A2440; --bg-base:#0B0F1D;
  --ink:#EEF1F8; --ink-2:rgba(238,241,248,.74); --ink-3:rgba(238,241,248,.58);
  --surface:rgba(238,241,248,.045); --surface-2:rgba(238,241,248,.09);
  --border:rgba(238,241,248,.10); --border-strong:rgba(238,241,248,.22);
  --accent:#9DAEFF; --accent-soft:#B6C2FF; --on-accent:#080E1A;

  --warn:#EDB35C; --caution:#EDB35C;

  --sleep:var(--accent); --steps:#7FC4E8;
  --calories:var(--alert); --cycle:#E8A6C2;
  --stage-deep:#6F62E8; --stage-core:#9DAEFF; --stage-rem:#C9D2FF;

  --shell:#070B15;
  --sb-thumb:rgba(238,241,248,.16); --sb-thumb-hover:rgba(238,241,248,.30);
}

*,*::before,*::after{ box-sizing:border-box; }

/* ---------- scrollbars ----------
   The thumb is built from the mode's own ink, so it follows the toggle, and
   color-scheme hands Firefox and every unstyled scroller the right bar. */
html{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) transparent; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--sb-thumb); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--sb-thumb-hover); background-clip:content-box; }
::-webkit-scrollbar-thumb:active{ background:var(--accent); background-clip:content-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- page ----------
   The app's "low light from above": a radial glow from bgTop at the top
   centre falling off to bgBase. */
body{
  margin:0;
  background:
    radial-gradient(120% 78% at 50% -12%, var(--bg-top) 0%, var(--bg-base) 62%)
    no-repeat var(--bg-base);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px; line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s ease, color .5s ease;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.012em; }
p{ margin:0; }
a{ color:inherit; }
strong,b{ font-weight:500; }

.wrap{ width:min(1140px,100% - 2.6rem); margin-inline:auto; }

/* AppText.label: the tracked-out uppercase eyebrow. The wide tracking is
   what lets 13px read as a label, so it never drops below 13. */
.eyebrow{
  font-family:var(--text); font-weight:500;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb, var(--bg-base) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.nav-in{ display:flex; align-items:center; gap:1.1rem; padding:.72rem 0; }
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em;
}
.mark{
  width:29px; height:29px; border-radius:8px; flex:none;
  background:url("mark.png") center/cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--border-strong);
}
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:.45rem; }
.nav-links a.txt{ color:var(--ink-2); text-decoration:none; font-size:15px; padding:.4rem .6rem; border-radius:8px; }
.nav-links a.txt:hover,.nav-links a.txt[aria-current="page"]{ color:var(--ink); background:var(--surface-2); }
@media (max-width:820px){ .nav-links a.txt{ display:none; } }

/* The mode picker — the same three chips as Profile → Mode, in the same
   order (Light, Ember, Midnight, as BwThemeMode declares them), each
   carrying its own page ground with its accent on top. */
.modes{ display:flex; gap:2px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.modes button{
  display:inline-flex; align-items:center; gap:.42rem;
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  padding:.24rem .66rem; border-radius:999px; border:0; background:transparent; color:var(--ink-3);
  transition:background .25s, color .25s;
}
.modes button[aria-pressed="true"]{ background:var(--surface-2); color:var(--ink); }
.modes button:hover{ color:var(--ink); }
.modes .sw{
  width:12px; height:12px; border-radius:50%; flex:none; display:block;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.35);
}
.modes button[data-set="ember"] .sw{ background:radial-gradient(circle at 30% 30%, #EDB35C 0 42%, #2A2015 44%); }
.modes button[data-set="light"] .sw{ background:radial-gradient(circle at 30% 30%, #A9661A 0 42%, #F8E3C2 44%); }
.modes button[data-set="midnight"] .sw{ background:radial-gradient(circle at 30% 30%, #9DAEFF 0 42%, #1A2440 44%); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  font-family:var(--text); font-weight:500; font-size:15px; letter-spacing:.005em;
  min-height:44px; padding:.6rem 1.1rem; border-radius:12px; border:1px solid transparent; cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease, filter .2s ease, background .3s;
}
/* AppColors.primaryGradient: accent into accentSoft, top-left to bottom-right. */
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-soft)); color:var(--on-accent); }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn-ghost{ border-color:var(--border-strong); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ background:var(--surface-2); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border); padding:1.8rem 0 2.6rem; }
.foot-in{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; font-size:14px; color:var(--ink-3); }
.foot-in a{ text-decoration:none; }
.foot-in a:hover{ color:var(--ink); }
.foot-in .sp{ margin-left:auto; }
.foot-in .brand{ font-size:.98rem; }
.foot-in .brand .mark{ width:22px; height:22px; border-radius:6px; }

/* ---------- small screens ----------
   Below 600px the chip labels go and the swatches speak for themselves,
   which is what keeps the bar to one row on a phone. Each chip stays a
   44px target, as AppText.minTap asks. */
@media (max-width:600px){
  .nav-in{ gap:.55rem; padding:.6rem 0; }
  .brand{ font-size:.98rem; gap:.45rem; }
  .brand .mark{ width:25px; height:25px; border-radius:7px; }
  .nav-links{ gap:.4rem; }
  .modes{ padding:2px; }
  .modes button{ padding:0; min-width:34px; min-height:36px; justify-content:center; }
  .modes button .lbl{ display:none; }
  .modes .sw{ width:18px; height:18px; }
  .nav-links .btn{ min-height:40px; padding:.45rem .75rem; font-size:14px; }
}
/* On a phone the bar holds the name and the three modes; the hero's own
   button sits right under it, so the bar's copy of it goes. */
@media (max-width:420px){
  .nav-links > .btn{ display:none; }
}
@media (max-width:330px){
  .nav-in .brand .lbl-brand{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}