/* Light / dark for the ported client microsites.

   IEEFA and Honda DIGICON are light designs that get inverted here. The Builder
   Summit is excluded by :not(.tv-site): it runs the house palette,
   which is already dark, and layering an inversion on top of it only fights.

   All three stylesheets are token-driven, so a dark mode is a token swap rather
   than a second stylesheet. Brand hues (Honda red, IEEFA pink, house tosca)
   are deliberately NOT swapped, only the surfaces and text they sit on. */

/* ── Honda DIGICON ───────────────────────────────────────────────────────── */
body.microsite:not(.tv-site)[data-mode="dark"]{
  --paper:#0E1114; --paper-2:#151A20; --white:#171D23;
  --ink:#ECEFF1; --ink-2:#A9B2BB; --ink-3:#6B7580;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --red-t:#2A1116; --blue-t:#0F1E33; --orange-t:#2A2113; --green-t:#102418; --purple-t:#1C1630;
  --dark-card:#171D23; --dark-raised:#171D23; --dark-raised-2:#1E252C; --dark-2:#171D23;
  --dark-border:rgba(255,255,255,.12); --dark-border-hover:rgba(255,255,255,.26);
  --text-muted:#A9B2BB; --text-dim:#6B7580;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);

  /* ── IEEFA (Bootstrap brand layer) ─────────────────────────────────────── */
  /* --navy is load-bearing twice over: it is the body text colour AND the fill
     behind the countdown, ticket header, modals and toast. Inverting it would
     fix the text and break every one of those, so the surfaces move and --navy
     stays put; the text colours are re-pointed explicitly below. */
  --brand-bg:#0D1418; --card:#141E24; --brand-soft:#33202A;

  /* ── iRegist Builder Summit (shared event.css) ─────────────────────────── */
  --bg:#0C1113; --soft:#12252A; --text:#EAF0F1; --muted:#93A3A7;
}

/* Surfaces those stylesheets paint with a literal white rather than a token. */
/* Every surface the three stylesheets paint with a literal white rather than a
   token. Enumerated from the stylesheets themselves. An audit that only fixed
   the panels someone happened to look at is how a dark mode ships half-done. */
body.microsite:not(.tv-site)[data-mode="dark"] .card,
body.microsite:not(.tv-site)[data-mode="dark"] .event-details,
body.microsite:not(.tv-site)[data-mode="dark"] .panel-card,
body.microsite:not(.tv-site)[data-mode="dark"] .attend-card,
body.microsite:not(.tv-site)[data-mode="dark"] .choice,
body.microsite:not(.tv-site)[data-mode="dark"] .stat-card,
body.microsite:not(.tv-site)[data-mode="dark"] .ticket-body,
body.microsite:not(.tv-site)[data-mode="dark"] .board,
body.microsite:not(.tv-site)[data-mode="dark"] .card-dark,
body.microsite:not(.tv-site)[data-mode="dark"] .panel,
body.microsite:not(.tv-site)[data-mode="dark"] .faq,
body.microsite:not(.tv-site)[data-mode="dark"] .faq-item,
body.microsite:not(.tv-site)[data-mode="dark"] .form-section,
body.microsite:not(.tv-site)[data-mode="dark"] .reg-form,
body.microsite:not(.tv-site)[data-mode="dark"] .reg-side,
body.microsite:not(.tv-site)[data-mode="dark"] .cert-form,
body.microsite:not(.tv-site)[data-mode="dark"] .cert-closed,
body.microsite:not(.tv-site)[data-mode="dark"] .cert-result,
body.microsite:not(.tv-site)[data-mode="dark"] .tier,
body.microsite:not(.tv-site)[data-mode="dark"] .track,
body.microsite:not(.tv-site)[data-mode="dark"] .hl .item,
body.microsite:not(.tv-site)[data-mode="dark"] .member,
body.microsite:not(.tv-site)[data-mode="dark"] .summary,
body.microsite:not(.tv-site)[data-mode="dark"] .mailframe,
body.microsite:not(.tv-site)[data-mode="dark"] .foot,
body.microsite:not(.tv-site)[data-mode="dark"] .site-footer{background:var(--card,#141E24);
  border-color:rgba(255,255,255,.10)}
body.microsite:not(.tv-site)[data-mode="dark"] .f input,
body.microsite:not(.tv-site)[data-mode="dark"] .f select,
body.microsite:not(.tv-site)[data-mode="dark"] .f textarea,
body.microsite:not(.tv-site)[data-mode="dark"] .form-control,
body.microsite:not(.tv-site)[data-mode="dark"] .form-select{background:#101A1F;border-color:rgba(255,255,255,.16);
  color:var(--text,#EAF0F1)}
body.microsite:not(.tv-site)[data-mode="dark"] .form-control::placeholder{color:#6B7580}
body.microsite:not(.tv-site)[data-mode="dark"] p,
body.microsite:not(.tv-site)[data-mode="dark"] .text-secondary,
body.microsite:not(.tv-site)[data-mode="dark"] .sec-sub,
body.microsite:not(.tv-site)[data-mode="dark"] .detail-sub,
body.microsite:not(.tv-site)[data-mode="dark"] .panel-sub,
body.microsite:not(.tv-site)[data-mode="dark"] .agenda-desc,
body.microsite:not(.tv-site)[data-mode="dark"] .attend-desc{color:#A9B2BB!important}

/* Text that IEEFA paints with --navy, now that --navy stays a dark fill. */
body.microsite:not(.tv-site)[data-mode="dark"],
body.microsite:not(.tv-site)[data-mode="dark"] h1,body.microsite:not(.tv-site)[data-mode="dark"] h2,body.microsite:not(.tv-site)[data-mode="dark"] h3,
body.microsite:not(.tv-site)[data-mode="dark"] h4,body.microsite:not(.tv-site)[data-mode="dark"] h5,
body.microsite:not(.tv-site)[data-mode="dark"] .event-title,
body.microsite:not(.tv-site)[data-mode="dark"] .detail-val,
body.microsite:not(.tv-site)[data-mode="dark"] .agenda-title,
body.microsite:not(.tv-site)[data-mode="dark"] .panel-title,
body.microsite:not(.tv-site)[data-mode="dark"] .ticket-name,
body.microsite:not(.tv-site)[data-mode="dark"] .attend-title,
body.microsite:not(.tv-site)[data-mode="dark"] .form-label,
body.microsite:not(.tv-site)[data-mode="dark"] .stat-num,
body.microsite:not(.tv-site)[data-mode="dark"] .reg-name,
body.microsite:not(.tv-site)[data-mode="dark"] .ticket-info-row b{color:#E7EDF0}

/* Summit: --accent is its dark ink, used for the code and badge chrome. */
body.microsite:not(.tv-site)[data-mode="dark"] .badge-code,
body.microsite:not(.tv-site)[data-mode="dark"] .nav-brand,
body.microsite:not(.tv-site)[data-mode="dark"] .sumrow.total{color:#EAF0F1}
body.microsite:not(.tv-site)[data-mode="dark"] .ticket-body::before,
body.microsite:not(.tv-site)[data-mode="dark"] .ticket-body::after{background:var(--brand-bg)}
body.microsite:not(.tv-site)[data-mode="dark"] .lang-switch{background:rgba(20,30,36,.92);border-color:rgba(255,255,255,.12)}
body.microsite:not(.tv-site)[data-mode="dark"] .lang-switch a{color:#6B7580}
body.microsite:not(.tv-site)[data-mode="dark"] .nav{background:rgba(12,17,19,.86);border-bottom-color:rgba(255,255,255,.08)}
body.microsite:not(.tv-site)[data-mode="dark"] .site-nav{background:rgba(14,17,20,.9)}
body.microsite:not(.tv-site)[data-mode="dark"] .badge-qr,
body.microsite:not(.tv-site)[data-mode="dark"] .party img{background:#fff}    /* a QR must stay black-on-white */
body.microsite:not(.tv-site)[data-mode="dark"] .cert{background:#fff;color:#1C2326}
body.microsite:not(.tv-site)[data-mode="dark"] .cert .body,
body.microsite:not(.tv-site)[data-mode="dark"] .cert .ttl,
body.microsite:not(.tv-site)[data-mode="dark"] .cert .sig{color:#5E6B6F!important}

/* ── Showcase shell ──────────────────────────────────────────────────────────
   The palette originates in truevindo.com, so the light theme is that site's
   own [data-theme="light"] override, token for token: the signal drops from the
   bright screen tosca to the core brand teal, which is what keeps it legible on
   paper without inventing a second palette. */
body.suite[data-mode="light"]{
  color-scheme:light;
  --black:#fbfaf8; --black-soft:#f4f2ee; --black-panel:#ffffff;
  --signal:#2e6f7d; --signal-bright:#3f919d; --on-signal:#ffffff;
  --paper:#ffffff; --paper-ink:#1c2326;
  --text:#1c2326; --muted:#5e6b6f;
  --line:rgba(28,35,38,.14); --line-dark:rgba(28,35,38,.18);
}
/* The tosca feature bands stay tosca in both themes. They are the brand's
   fixed accent, not a surface that follows the theme. */
body.suite[data-mode="light"] .feature,
body.suite[data-mode="light"] .closer{background:#22cdbe;color:#040004}
body.suite[data-mode="light"] .board__media img{filter:grayscale(.35) contrast(1.02);opacity:.94}
body.suite[data-mode="light"] .hero__grid{opacity:.5}
body.suite[data-mode="light"] .shot,
body.suite[data-mode="light"] .phone .screen,
body.suite[data-mode="light"] .certframe{background:#fff}
/* Screen orange is pitched for a black ground; on paper it needs the brand's
   deeper shade to stay readable. */
body.suite[data-mode="light"] .notice .n,
body.suite[data-mode="light"] .cell .n{color:#c96a12}

/* The pipeline sits on --black-soft, which in the light theme is near-white;
   the inactive stage labels need a darker muted than the dark theme's. */
body.suite[data-mode="light"] .flow__label{color:#5a6a6d}