/* TrainHer Pro brand tokens. The ONE place the colors and fonts are defined for every web page.
   White and off-white ground, ink text, restrained blood red. Light is the default on every page; dark is a choice. Mirrored for email and the PWA in src/core/brand.ts
   (scripts/test-brand.mjs checks the two agree and that every text pair passes WCAG AA, 4.5:1; large text and
   UI edges need 3:1).

   Red rule: --th-red is for fills, borders and large text, and carries white text (12:1).
   --th-red-text is the red for small text: the blood red itself on light surfaces, a lighter red on the dark theme. */
:root {
  --th-red: #C21A2B;
  --th-red-press: #9E1522;
  --th-red-text: #C21A2B;
  --th-on-red: #FFFFFF;

  --th-black: #FFFFFF;
  --th-surface: #F7F5F2;
  --th-surface-2: #EFEBE6;
  --th-line: #E2DDD7;
  --th-edge: #8F8983;

  --th-text: #111113;
  --th-text-2: #3F3C39;
  --th-muted: #68635E;

  --th-ok: #1E7A46;
  --th-warn: #8A5A00;

  --th-display: 'Playfair Display', 'Bodoni MT', Georgia, 'Times New Roman', serif;
  --th-body: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
}


/* Dark theme: the person picked it with the sun and moon control in the app header (saved on their account). Same blood
   red; a lighter red for small red text on the dark cards (4.7:1 on the lightest card). */
html[data-theme="dark"] {
  --th-red-text: #DF5B66;
  --th-black: #0A0A0B;
  --th-surface: #141416;
  --th-surface-2: #1C1C1F;
  --th-line: #2C2C31;
  --th-edge: #6B6B73;
  --th-text: #F4F4F5;
  --th-text-2: #C9C9CE;
  --th-muted: #A0A0A8;
  --th-ok: #4ADE80;
  --th-warn: #FBBF24;
  color-scheme: dark;
}
body.app { --line-2: #EFEBE6; --nav-active: #F3E3E5; --side-bg: #F7F5F2; --shadow: 0 10px 30px -18px rgba(17,17,19,.25); }
html[data-theme="dark"] body.app { --line-2: var(--th-surface-2); --nav-active: #2A1214; --side-bg: var(--th-surface); --shadow: 0 10px 30px -18px rgba(0,0,0,.8); }

/* Sun and moon toggle in the app header. */
.theme-form{display:inline-flex;margin:0}
.theme-btn{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:4px!important;color:var(--th-muted);border:1px solid var(--th-line);background:var(--th-surface)}
.theme-btn:hover{color:var(--th-text);border-color:var(--th-edge)}
.theme-btn:focus-visible{outline:2px solid var(--th-red);outline-offset:2px}
.theme-btn .theme-moon{display:none}
html[data-theme="dark"] .theme-btn .theme-sun{display:none}
html[data-theme="dark"] .theme-btn .theme-moon{display:inline-grid}
@media(max-width:720px){.theme-btn{width:30px;height:30px}.crumbs .crumb-product{overflow:hidden;text-overflow:ellipsis;min-width:0}}

/* Base corners. polish.css (loaded last) rounds buttons, fields and cards in the app, portal and onboarding (Oct 2026). */
.btn,button,.icon-btn,.submit,.opt,.pick,.kind,.choice a,.later,.solo,.pro,.tag,.org,.foot .pw,.pvbar a,.pvbar button,.wz-up .go,.wz-up .try,.palette button,.period-switch,.period-switch button,.chip span,.pill,.tier-flag,.side nav a,.drop,.winfo,
input:not([type=radio]):not([type=checkbox]),select,textarea,a.btn,[class*="-btn"],[role="button"]{border-radius:4px!important}
body{font-variant-numeric:lining-nums}

/* The public site is white and editorial: the same tokens, flipped to light, on pages that carry body.pub. Blood red stays the one accent. */
body.pub {
  --th-black: #FFFFFF;
  --th-surface: #F7F5F2;
  --th-surface-2: #EFEBE6;
  --th-line: #E2DDD7;
  --th-edge: #8F8983;
  --th-text: #111113;
  --th-text-2: #3F3C39;
  --th-muted: #68635E;
  --th-red-text: #C21A2B;
  --th-ok: #1E7A46;
  --th-warn: #8A5A00;
  --ink: #111113; --ink-2: #3F3C39; --ink-3: #68635E; --mist: #FFFFFF; --paper: #F7F5F2; --line: #E2DDD7; --line-2: #EFEBE6; --bad: #C21A2B; --edge: #8F8983; --accent-ink: #C21A2B;
  color-scheme: light;
}

/* The lockup (wizard, forms, saved pages) carries both wordmarks; the theme picks one. */
.lockup .wm-dark{display:none}
html[data-theme="dark"] .lockup .wm-dark{display:inline}
html[data-theme="dark"] .lockup .wm-light{display:none}