/*
 * SageAI · Build A Chatbot — brand presentation (Phase 0). Tokens only; no raw hex.
 * Display wordmark rule (BRAND-STANDARD §6): "Sage" + suite name in ink, the app
 * accent in the suite color. The underscore id (SageAI_BAC) stays a system id only.
 */
.brand-accent { color: hsl(var(--suite)); }

/*
 * Derived text roles (WCAG 2.2 §1.4.3). Defined here because brand.css is the one
 * app stylesheet every surface loads — the entry pages take landing.css and the shell
 * takes styles.css, so a token defined in either is undefined on the other half.
 *
 * hsl(var(--muted-foreground)) is tuned against --background; a section wash drops it
 * to 4.35-4.44:1, just under AA. The semantic ramps (--success/--destructive) are fills
 * and graphics at 3:1, not 4.5:1 small text — see components/primitives/badge.tsx.
 * Both derive from --foreground so they invert correctly with the theme.
 */
:root {
  --sage-text-secondary-on-tint: color-mix(in srgb, hsl(var(--foreground)) 74%, hsl(var(--background)));
  --sage-text-success: color-mix(in srgb, hsl(var(--success)) 52%, hsl(var(--foreground)));
  --sage-text-error: color-mix(in srgb, hsl(var(--destructive)) 58%, hsl(var(--foreground)));
  /* Accent hues used as small TEXT. The raw accents are 3:1 graphic tokens: the suite
     violet reads 3.1-3.4:1 on the dark surfaces and the info blue 3.99:1, both under AA.
     Mixing toward --foreground darkens in light mode and lightens in dark mode, so one
     formula holds in both directions while keeping the hue recognisable. */
  --sage-text-accent: color-mix(in srgb, hsl(var(--suite)) 55%, hsl(var(--foreground)));
  --sage-text-ai: color-mix(in srgb, hsl(var(--ai)) 55%, hsl(var(--foreground)));
  --sage-text-info: color-mix(in srgb, hsl(var(--info)) 55%, hsl(var(--foreground)));
}

/* The canonical dark block pairs --primary with a near-black foreground, which is only
   3.15:1 on the AI suite violet. Light mode already uses white there and reaches 5.6:1,
   so hold white in both themes — the same correction the canonical file makes explicitly
   for the WM amber suite. */
:root[data-suite="ai"] { --primary-foreground: 0 0% 100%; }

.brand-accent { color: var(--sage-text-accent); }

/* Show the suite SVG mark cleanly inside the existing logo containers (neutralize
   the legacy colored square; the SVG is the mark now). */
.logo-icon,
.l-logo-mark { background: transparent !important; padding: 0; overflow: visible; }
.logo-icon > img,
.l-logo-mark > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* PasswordInput pattern (data-sage-password): masked field + show/hide toggle. */
.sage-password-wrap { position: relative; display: flex; align-items: center; }
.sage-password-wrap > input { flex: 1; padding-right: 4.25rem; }
.sage-password-toggle {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 0.25rem 0.5rem;
  font-size: 0.78rem; font-weight: 600; color: hsl(var(--foreground, 222 47% 11%));
}
[data-theme="dark"] .sage-password-toggle,
.dark .sage-password-toggle,
.dark-mode .sage-password-toggle {
  color: hsl(var(--foreground, 210 40% 96%));
}

/*
 * Links that no component rule reaches. Without this the unstyled browser default blue is
 * used, which measures 2.05:1 on the dark landing surface and 1.88:1 on the dark Trust Center.
 * Scoped to content links so component/button anchors keep their own treatment.
 */
.trust-container a:not([class]),
.landing-trust-nav a,
.register-link a,
.login-link a,
.auth-secondary-link a,
.auth-alt-action a,
.trust-list a {
  color: var(--sage-text-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}