/* ============================================================
   Cyphon Media — shared brand theme
   Loaded AFTER each page's own <style>, so these rules re-skin
   the page to the Cyphon brand without editing each page's CSS.

   Palette: light canvas · navy text · brand blue · crimson accent
   Accent : crimson #c8102e (hover #a40d25) — global highlight color
   Motion : quick hover-lift on shadowed interactive objects
   ============================================================ */

:root {
  --navy: #0f2742;          /* primary dark / text */
  --navy-mid: #1b4066;
  --navy-light: #2b5b88;
  --gold: #2563a8;          /* legacy var name — now the Cyphon brand blue */
  --gold-light: #6aa6da;
  --off-white: #f4f7fb;
  --light-gray: #e3ebf4;
  --crimson: #c8102e;       /* global accent */
}

/* Section eyebrow labels + step tags → crimson accent */
.section-label,
.process-tag { color: #c8102e !important; }

/* Primary calls-to-action → crimson, with the shadow + hover-lift theme.
   (Buttons that live inside an already-shadowed white card opt out per-page.) */
.btn-primary,
.form-submit,
.nav-cta,
.btn-claim,
.btn-pay {
  background: #c8102e !important;
  border-color: #c8102e !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(200, 16, 46, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover,
.form-submit:hover,
.nav-cta:hover,
.btn-claim:hover,
.btn-pay:hover {
  background: #a40d25 !important;
  transform: translateY(-4px);
}

/* ── Accent-surface text contrast ───────────────────────────────────────────
   The gold→blue rebrand left navy text on now-blue accent backgrounds (hard to
   read). Force WHITE text on every blue/navy accent surface — buttons, badges,
   dots, pills, avatars. Applies to every page that loads this theme. */
.btn.primary, .btn-advance, .btn-convert, .an-btn-gold, .btn-gold,
.invoice-pay-btn, .btn-start-request, .submit-btn, .mockup-btn,
.addon-card.selected .addon-card-btn,
.nav-badge, .tab-notif, .project-nav-badge, .stage-dot.done,
.tl-circle.done, .tl-dot.done, .prog-step.done .prog-dot,
.check-opt.selected .check-box, .what-check, .faq-item.open .faq-icon,
.process-num, .check-inner, .q-num, .testi-avatar,
.sidebar-account-avatar, .chat-head-avatar, .setup-avatar,
.cmsg-av, .chat-msg-avatar,
.pchat-msg .pchat-msg-avatar, .vip-msg .vip-msg-avatar {
  color: #fff !important;
}