/* Trainingbits theme v4: navy, green and white.
   Loaded after the layouts' own styles. It changes only colours, fonts and
   shapes; no markup, script or behaviour is touched, so every page works as
   before. Remove the <link> (or run undo-theme.sh) to go back. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');

/* ---------- colour tokens: light ---------- */
html:root {
  --lime: #3A8016;          /* accent green (text, ticks, bars) */
  --lime-bright: #4CB847;   /* logo green */
  --slate: #061429;         /* navy */
  --hero: #061429;
  --ground: #FFFFFF;        /* page background: white, no tint */
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --line: #DCE4EF;
  --line-strong: #B9C7DB;
  --ink: #061429;
  --ink-dim: #34496A;
  --ink-faint: #5A6D8C;
  --ok-bg: #E7F4DD;
  --blue: #2B4FA0;
  --blue-bg: #FFFFFF;
  --tb-navy: #061429;
  --tb-navy-2: #0D2142;
  --tb-green: #3A8016;
  --tb-green-2: #4CB847;
  --radius: 14px;
  --radius-s: 10px;
}

/* ---------- colour tokens: dark ---------- */
html:root[data-theme="dark"] {
  --lime: #6FD25E;
  --lime-bright: #8BE07A;
  --slate: #020812;
  --hero: #020812;
  --ground: #030B18;
  --surface: #061429;
  --surface-2: #061429;
  --line: #1A3359;
  --line-strong: #26426C;
  --ink: #FFFFFF;
  --ink-dim: #C8D5E8;
  --ink-faint: #9DB0CC;
  --ok-bg: #1E3F1A;
  --blue: #8FB2F0;
  --blue-bg: #061429;
}

/* ---------- headings ---------- */
html .content h1, html main > h1, html .labhead h1 {
  font-family: 'Barlow Condensed', Inter, system-ui, sans-serif;
  font-weight: 700; letter-spacing: .2px; font-size: 30px; line-height: 1.1;
}

/* ---------- top bar (signed-in app) ---------- */
html .topbar {
  background: #FFFFFF;
  box-shadow: none; border-bottom: 1px solid var(--line);
}
html:root[data-theme="dark"] .topbar { background: #061429; }
html .toplinks a { color: var(--ink); }
html .toplinks a:hover, html .toplinks a.on { color: var(--ink); }
html .toplinks a.on::after { background: var(--tb-green-2); }
html .brand b { color: var(--ink); }

/* logo: your symbol on a white circle, in place of the placeholder icon */
html .brand .logo, html .brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: #FFFFFF url('/tb/logo-mark.png') center / 26px 26px no-repeat;
  border: 1px solid var(--line); box-shadow: none;
}
html .brand .logo svg, html .brand-mark svg { display: none; }

/* ---------- side menu: navy ---------- */
html .side { background: #061429; border-right: 0; }
html .side .navlink { color: #C8D5E8; }
html .side .navlink:hover { background: #0D2142; color: #FFFFFF; border-left-color: var(--tb-green-2); }
html .side .navlink.on { background: #0D2142; color: #FFFFFF; border-left-color: var(--tb-green-2); }
html .side .navlink .pill { background: var(--tb-green-2); color: #061429; }
html .side .user-chip { color: #FFFFFF; }
html .side .user-chip:hover { background: #0D2142; }
html .side, html .side * { --ink: #FFFFFF; --ink-dim: #C8D5E8; --ink-faint: #9DB0CC; --line: #1A3359; }

/* ---------- buttons ---------- */
html .btn { border-radius: 999px; }
html .btn-primary {
  background: var(--tb-green); color: #FFFFFF; border-color: var(--tb-green);
  box-shadow: none;
}
html .btn-primary:hover { background: #2F6E12; border-color: #2F6E12; filter: none; box-shadow: none; }
html .btn-ghost { border-color: var(--ink); }
html .wallet-chip { background: #FFFFFF; border: 1px solid var(--line); }
html .wallet-chip b { color: var(--ink); }
html .wallet-chip span:last-child { color: var(--ink-dim); }

/* ---------- badges ---------- */
html .badge.ok { color: #24560C; border-color: #B7DDA3; }
html .badge.progress { background: #FFFFFF; color: var(--blue); border-color: var(--blue); }
html:root[data-theme="dark"] .badge.ok { color: #B8EBAE; border-color: #2F6E12; }

/* ---------- cards: white with a clear edge, rounder ---------- */
html .card { background: var(--surface); }

/* ---------- old lime colours written straight into charts and rings ---------- */
html [fill="#7DA30F"], html [fill="#9FCE15"] { fill: var(--tb-green-2); }
html [stroke="#7DA30F"], html [stroke="#9FCE15"] { stroke: var(--tb-green-2); }

/* The sign-in page has its own navy-and-white layout since v2. */