/* Lloyd HQ shared look — the ONE copy of the colors, sizes and shared parts.
   Linked by index.html and every iframe page (money, gym, grow, walk, bible, routines,
   trading, create). Change a color here and every screen follows.

   Rules the tokens encode:
   - Solid surfaces, no glass: --bg, then --s1 (cards), then --s2 (inputs, rows on a card).
     A visible 1px --line edge plus a 1px top edge-light (--edge) separates them.
   - Color has three jobs: --ok green = live / ok / primary, --warn amber = needs you,
     --bad red = broken. --accent is the theme's pick for links, focus and the active tab.
   - Seven type sizes (12–34px), nothing smaller. --f-mono for times, counts, status, money.
   - Motion is 120 / 200ms ease-out, and every animation has a reduced-motion fallback.

   Themes: no data-theme (or "auto") follows the phone: dark by default, Paper when the
   phone is in light mode. "lloyd" = dark always. "warm" (Gold) = dark with a gold accent.
   "paper" and "mint" = light always. */
:root{
  color-scheme:dark;
  --bg:#000; --s1:#0E1013; --s2:#16191D; --line:#2B3036;
  --txt:#fff; --mut:#A6ADB4;
  /* --brand is the icon's green: only as a big fill under white text (5.5:1).
     --accent is the same hue lifted until small text clears AA on black (7.3:1). */
  --accent:#35AD62; --accent-ink:#04120A; --brand:#237841; --brand-ink:#fff;
  --ok:#35AD62; --warn:#FFC24D; --bad:#FF6B60;
  --bad-fill:#C9382D;   /* --bad as a BACKGROUND under white text (5.1:1) */
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --f-serif:Georgia,"Times New Roman",serif;
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:26px; --t-3xl:34px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --dur-1:120ms; --dur-2:200ms;
  --edge:inset 0 1px 0 rgb(255 255 255 / .05);
  --pop-shadow:0 16px 48px rgb(0 0 0 / .5);
  /* aliases: the old names keep working so no page breaks mid-migration */
  --panel:var(--s1); --panel2:var(--s2); --card:var(--s1); --card2:var(--s2);
  --green:var(--ok); --amber:var(--warn); --red:var(--bad); --red-fill:var(--bad-fill);
  --glow:var(--accent); --tx:var(--txt); --grn:var(--ok); --acc:var(--accent);
  --jpanel:var(--s1); --jpanel2:var(--s2); --jline:var(--line);
}
html[data-theme="warm"]{ --accent:#D6A35E; --accent-ink:#161207; }
/* Paper: the sunlight theme. Picked directly, or by Auto when the phone is in light mode. */
html[data-theme="paper"]{
  color-scheme:light;
  --bg:#F4F1EA; --s1:#FDFCF8; --s2:#EEEADF; --line:#C2B8A3;
  --txt:#201D18; --mut:#6B6457; --accent:#25616C; --accent-ink:#fff;
  --ok:#2F6045; --warn:#7C551B; --bad:#9E4238;
  --edge:inset 0 1px 0 rgb(255 255 255 / .7); --pop-shadow:0 16px 48px rgb(40 30 10 / .18);
}
@media (prefers-color-scheme: light){
  html:not([data-theme]), html[data-theme="auto"]{
    color-scheme:light;
    --bg:#F4F1EA; --s1:#FDFCF8; --s2:#EEEADF; --line:#C2B8A3;
    --txt:#201D18; --mut:#6B6457; --accent:#25616C; --accent-ink:#fff;
    --ok:#2F6045; --warn:#7C551B; --bad:#9E4238;
    --edge:inset 0 1px 0 rgb(255 255 255 / .7); --pop-shadow:0 16px 48px rgb(40 30 10 / .18);
  }
}
html[data-theme="mint"]{
  color-scheme:light;
  --bg:#EDF4EF; --s1:#F8FCF9; --s2:#E3EEE7; --line:#B3C8BA;
  --txt:#16211B; --mut:#55685D; --accent:#1A6F57; --accent-ink:#fff;
  --ok:#256B4A; --warn:#7C551B; --bad:#A5433A;
  --edge:inset 0 1px 0 rgb(255 255 255 / .7); --pop-shadow:0 16px 48px rgb(10 40 20 / .16);
}

/* ---- one selection ring for everything a keyboard can reach ----
   :where() keeps it at zero specificity so a component can still tune its offset. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- the five shared parts ---- */
/* 1. surface: every card, tile and panel */
.surface{ background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--edge); }
/* 2. btn: 44px tall, three looks. Plain .btn is the neutral one. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-4);
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--s2); color:var(--txt); box-shadow:var(--edge);
  font:inherit; font-size:var(--t-sm); font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none;
  transition:background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
.btn:hover{ border-color:color-mix(in srgb, var(--txt) 28%, var(--line)); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ background:color-mix(in srgb, var(--accent) 88%, var(--txt)); }
.btn.quiet{ background:transparent; border-color:transparent; box-shadow:none; color:var(--mut); }
.btn.quiet:hover{ background:var(--s2); color:var(--txt); }
.btn.danger{ background:transparent; color:var(--bad); border-color:color-mix(in srgb, var(--bad) 50%, var(--line)); box-shadow:none; }
/* 3. chip: small status / count tag, mono so numbers line up */
.chip{ display:inline-flex; align-items:center; gap:var(--sp-1); min-height:24px; padding:0 var(--sp-2); border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--s2); color:var(--mut); white-space:nowrap;
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500; font-variant-numeric:tabular-nums; line-height:1.4; }
.chip.ok, .chip.g{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); background:color-mix(in srgb, var(--ok) 10%, var(--s2)); }
.chip.warn, .chip.a{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, var(--line)); background:color-mix(in srgb, var(--warn) 10%, var(--s2)); }
.chip.bad, .chip.r{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); background:color-mix(in srgb, var(--bad) 10%, var(--s2)); }
/* 4. kicker: a quiet mono label for what kind of thing a card is. Sentence case, used sparingly. */
.kicker{ font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500; letter-spacing:0; text-transform:none; color:var(--mut); }
/* 5. readout: the one big number on a screen (net worth, a streak, a balance) */
.readout{ font-family:var(--f-mono); font-size:var(--t-3xl); font-weight:500; line-height:1.05; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--txt); }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* Inside HQ the shell owns the page title, so an embedded page hides its own header. */
body.embed .pagehead{ display:none; }

/* Every animation has a still version: with reduced motion on, things change state without moving. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}