/* MojoMosaic Proposals brand override.
 *
 * Loaded after DocuSeal's compiled stylesheet (stylesheet_pack_tag)
 * via an injected <link> in app/views/layouts/application.html.erb.
 * Cascade order is what makes this work: DaisyUI's CSS custom
 * properties get redefined here AFTER DaisyUI sets them.
 *
 * Tier 1: redefine DaisyUI tokens so anything using var(--p), var(--bc),
 * etc. resolves to MojoMosaic blue.
 *
 * Tier 2: explicit !important overrides on the surfaces the 2026-05-09
 * branding audit flagged as still resolving to DocuSeal defaults.
 */

:root,
[data-theme="docuseal"] {
  /* Primary: MojoMosaic navy #0138A1 */
  --p: 220 99% 32%;
  --pf: 220 99% 26%;
  --pc: 0 0% 100%;

  /* Secondary: hover navy #0F4FB8 */
  --s: 219 86% 39%;
  --sf: 219 86% 32%;
  --sc: 0 0% 100%;

  /* Accent: cyan #00AEEF */
  --a: 195 100% 47%;
  --af: 195 100% 38%;
  --ac: 218 60% 12%;

  /* Neutral: replace DocuSeal purple #291334 with MojoMosaic dark */
  --n: 215 28% 17%;
  --nf: 215 28% 13%;
  --nc: 210 40% 98%;

  /* Base surfaces: clean light slate instead of DocuSeal beige #efeae6 */
  --b1: 0 0% 100%;
  --b2: 210 40% 98%;
  --b3: 214 32% 91%;
  --bc: 215 28% 17%;

  /* Sizing tweaks to feel like Proposal Forge, not DocuSeal pillbox buttons */
  --rounded-btn: 0.375rem;
  --tab-radius: 0.5rem;
}

/* ---------- Tier 2: targeted overrides ---------- */

/* Buttons and badges */
.btn-primary,
.badge-primary {
  background-color: #0138A1 !important;
  border-color: #0138A1 !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0F4FB8 !important;
  border-color: #0F4FB8 !important;
}

.btn-secondary {
  background-color: #0F4FB8 !important;
  border-color: #0F4FB8 !important;
  color: #FFFFFF !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #0138A1 !important;
  border-color: #0138A1 !important;
}

.btn-accent {
  background-color: #00AEEF !important;
  border-color: #00AEEF !important;
  color: #0F4FB8 !important;
}

.btn-accent:hover {
  background-color: #0094CC !important;
  border-color: #0094CC !important;
}

/* Links */
.link-primary,
a.link-primary {
  color: #0138A1 !important;
}

.link-primary:hover,
a.link-primary:hover {
  color: #0F4FB8 !important;
}

/* Background and text utility classes */
.bg-primary {
  background-color: #0138A1 !important;
  color: #FFFFFF !important;
}

.bg-secondary {
  background-color: #0F4FB8 !important;
  color: #FFFFFF !important;
}

.bg-accent {
  background-color: #00AEEF !important;
}

.text-primary {
  color: #0138A1 !important;
}

.text-secondary {
  color: #0F4FB8 !important;
}

.text-accent {
  color: #00AEEF !important;
}

/* Keep short nav actions legible on narrow signer-host viewports. */
a[href="/sign_in"],
a[href="/sign_in"] span {
  white-space: nowrap !important;
}

/* Headings: DocuSeal's default --bc was #291334 (purple). Our new --bc is
 * the slate value above; this !important rule defends against any compiled
 * stylesheet that hardcoded the old purple instead of using var(--bc). */
h1,
h2,
h3,
.hero h1,
.hero h2,
.hero h3,
.prose h1,
.prose h2,
.prose h3 {
  color: hsl(215 28% 17%) !important;
}

/* Card surfaces: DocuSeal beige #efeae6 to clean white */
.card,
.card-body,
.card-bordered,
.modal-box {
  background-color: #FFFFFF !important;
}

/* Sign-in / sign-up surfaces */
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
.input:focus,
.input-bordered:focus {
  border-color: #0138A1 !important;
  outline-color: #0138A1 !important;
}

/* Checkbox and radio accent: replace DocuSeal pink-purple with MojoMosaic blue */
.checkbox-primary:checked,
.radio-primary:checked,
.toggle-primary:checked {
  --chkbg: #0138A1;
  --chkfg: #FFFFFF;
  background-color: #0138A1 !important;
  border-color: #0138A1 !important;
}

/* Tabs */
.tab-active,
.tabs-boxed .tab-active {
  background-color: #0138A1 !important;
  color: #FFFFFF !important;
}

/* Loading / progress accents */
.progress-primary,
.progress-primary::-webkit-progress-value {
  background-color: #0138A1 !important;
}

/* "Powered by DocuSeal" attribution stays untouched in styling: we are
 * required to preserve attribution per upstream DocuSeal additional terms,
 * and this CSS does not target the powered-by partial. */