/* assets/platform-brand.css — the PLATFORM brand layer (TruePlate's own
 * surfaces: the landing page and the /trainers/ console).
 *
 * Tenant branding is a different system entirely (shared/apply-brand.js +
 * tokens-*.css, direction-scoped) and never reads these variables.
 *
 * LOCKED palette (Alvaro, 2026-10-28): "Carbon Forest" — the :root default
 * below, so every platform surface wears it with zero JS. The two
 * [data-theme] alternates exist ONLY for the staging theme toggle (a
 * decision aid from the palette selection process); at production lock
 * they and the toggle are removed — see BRANDING.md.
 *
 * Token roles: --tp-ink = text + dark surfaces · --tp-accent = large CTAs,
 * rings, decorative (never small text) · --tp-accent-text = text-safe
 * accent for links and button backgrounds · --tp-support = pale tint
 * backgrounds · --tp-dark = dark-mode surface · --tp-dark-accent =
 * accent lightened for dark surfaces · --tp-on-dark = text on ink/dark.
 */

:root,
:root[data-theme="carbon-forest"] {
  --tp-ink: #0A241E;
  --tp-accent: #2FA84F;
  --tp-accent-text: #1F7A37;
  --tp-support: #DDEAE2;
  --tp-dark: #0A241E;
  --tp-dark-accent: #5CC474;
  --tp-on-dark: #EAF4EE;
  --tp-paper: #FBFCFB;
}
/* Staging alternate A — Teal-Forest (research finalist). */
:root[data-theme="teal-forest"] {
  --tp-ink: #113830;
  --tp-accent: #2E9E6B;
  --tp-accent-text: #1E7A50;
  --tp-support: #DDEAE2;
  --tp-dark: #0C2B28;
  --tp-dark-accent: #57C48E;
  --tp-on-dark: #EDF5EF;
  --tp-paper: #FBFCFB;
}
/* Staging alternate B — Carbon Signal (research finalist). */
:root[data-theme="carbon"] {
  --tp-ink: #14161A;
  --tp-accent: #2FA84F;
  --tp-accent-text: #1F7A37;
  --tp-support: #E3E6E3;
  --tp-dark: #14161A;
  --tp-dark-accent: #5CC474;
  --tp-on-dark: #EFF1EF;
  --tp-paper: #FBFCFB;
}

/* ---- logo lockup (inline SVG mark + wordmark) ---- */
.tp-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--tp-ink); }
.tp-lockup .tp-mark { width: 34px; height: 34px; flex: none; }
.tp-lockup .tp-wordmark {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800; letter-spacing: -0.03em; font-size: 21px; line-height: 1.05;
  white-space: nowrap;
}
.tp-lockup--hero .tp-mark { width: 76px; height: 76px; }
.tp-lockup--hero .tp-wordmark { font-size: 46px; }
.tp-lockup--hero { gap: 16px; }
.tp-lockup--on-dark { color: var(--tp-on-dark); }
.tp-lockup--on-dark .tp-mark { color: var(--tp-on-dark); }
.tp-lockup--on-dark .tp-dot { fill: var(--tp-dark-accent); }
.tp-mark .tp-dot { fill: var(--tp-accent); }

/* ---- staging theme toggle (decision aid — staging hosts only;
        platform-theme.js removes it anywhere else) ---- */
.tp-theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 2000;
  display: flex; align-items: center; gap: 2px;
  background: var(--tp-dark); color: var(--tp-on-dark);
  border-radius: 999px; padding: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-family: "Inter", system-ui, sans-serif; font-size: 12px;
  max-width: calc(100vw - 28px); flex-wrap: wrap; justify-content: flex-end;
}
.tp-theme-toggle .tp-theme-label {
  padding: 0 6px 0 9px; opacity: 0.65; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.tp-theme-toggle button {
  border: 0; border-radius: 999px; padding: 6px 11px; cursor: pointer;
  background: transparent; color: inherit; font: inherit; font-weight: 600;
  white-space: nowrap;
}
.tp-theme-toggle button[aria-pressed="true"] { background: var(--tp-accent); color: #fff; }
.tp-theme-toggle button:focus-visible { outline: 2px solid var(--tp-dark-accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .tp-theme-toggle { flex-wrap: nowrap; left: 8px; right: 8px; bottom: 8px; justify-content: center; font-size: 11px; }
  .tp-theme-toggle .tp-theme-label { display: none; }
  .tp-theme-toggle button { padding: 6px 8px; }
}

/* ================= /trainers/ console overrides =================
 * Loaded after the page's own <style>, so these win at equal specificity.
 * The page's chrome variables are re-pointed at the platform tokens:
 * --chrome (headers, primary surfaces) -> ink; --gold (selected states)
 * -> accent; --gold-ink (accent text) -> text-safe accent. */
:root {
  --chrome: var(--tp-ink);
  --gold: var(--tp-accent);
  --gold-ink: var(--tp-accent-text);
}
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
header.top .pname {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.03em; font-size: 20px;
}
.btn { background: var(--tp-accent-text); }
.publishbar button { background: var(--tp-accent-text); }
a { color: var(--tp-accent-text); }
:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* Sign-in card as a product auth screen: lockup on top, accent rule. */
#authView .auth-card { border-top: 4px solid var(--tp-accent); }
#authView .tp-lockup { margin-bottom: 16px; }