/* ============================================================================
   T-Mobile partner skin  —  loaded ONLY when Site:Brand=tmobile (injected by the
   server into <head>, after site.css, with data-brand="tmobile" on <html>).
   This is an OVERRIDE layer: it re-points the brand design tokens to T-Mobile
   magenta, swaps the typeface, and replaces the wordmark with the T-Mobile logo.
   Nothing here touches the default SimpleCX theme — remove the flag to revert.

   LOGO: /assets/tmobile-logo.svg is the co-brand lockup (official T-Mobile square + CX, "v1").
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* Token overrides — :root[data-brand] beats the light/dark token blocks, and this
   file loads after site.css so it also wins ties in an explicit dark theme. */
:root[data-brand="tmobile"]{
  --gold:#E20074;            /* T-Mobile magenta — the one brand accent */
  --gold-deep:#B0005C;       /* deeper magenta for hovers/emphasis */
  --gold-wash:#FCE3F2;       /* light magenta wash (chips, soft fills) */
  --btn-bg:#E20074;          /* primary CTA + user chat bubble -> magenta */
  --btn-fg:#FFFFFF;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Wordmark -> T-Mobile co-brand lockup (square + CX, viewBox 190x118 ~ 1.6:1).
   Hide the "simple"/"cx" spans and paint the lockup, sized by height for the nav/footer. */
:root[data-brand="tmobile"] .logo{
  display:inline-block; font-size:0 !important; line-height:0;
  width:62px; height:38px; vertical-align:middle;
  background:url('/assets/tmobile-logo.svg') left center / contain no-repeat;
}
:root[data-brand="tmobile"] .logo.sm{ width:54px; height:33px; }
:root[data-brand="tmobile"] .logo .word,
:root[data-brand="tmobile"] .logo .badge{ display:none !important; }

/* Hide the SimpleCX product-family chips (simplewfm/hr/cx/acd) — off-brand under the skin. */
:root[data-brand="tmobile"] .family{ display:none !important; }

/* A few belt-and-suspenders accents in case any component used the literal gold. */
:root[data-brand="tmobile"] .btn-primary{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }
:root[data-brand="tmobile"] .btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }