/* ============================================================
   READABILITY PATCH — loaded last, after the brand-override block.
   Fixes: cream-on-cream body text, brand-orange/pink accents on
   cream (2.5-3.2:1), cream button labels on brand accent
   (2.8-3.2:1), ink-on-ink text inside ink panels, and panels that
   kept legacy dark backgrounds.
   Tokens are re-declared on body (not :root) so dark mode flips
   with --ink / --cream instead of being hard-coded.
   ============================================================ */

/* 1. Text tokens: --white/--silver/--dim/--mute were still cream
      (values meant for the old dark theme) on a cream page. */
body[data-brand-name] {
  --white:  var(--ink) !important;
  --silver: var(--ink-soft) !important;
  --dim:    var(--ink-soft) !important;
  --mute:   var(--ink-soft) !important;
  --coal:   var(--cream) !important;
  --panel:  var(--cream) !important;
}

/* 2. Per-brand accent that is legible as TEXT on the brand surface
      (brand-acc stays untouched for fills, borders, shadows). */
body.brand-gopenguin { --acc-text: #B8174F; --btn-fg: #231815; }
body.brand-pinscore { --acc-text: #BF1238; --btn-fg: #231815; }
body.brand-findor   { --acc-text: #A83A00; --btn-fg: #231815; }
body.brand-reevia   { --acc-text: #BE123C; --btn-fg: #FFFDF9; }

body.theme-dark { --acc-text: var(--brand-acc); }
body.theme-dark.brand-reevia { --acc-text: #FF6B8B; }

/* 3. Accent-coloured text: use the legible variant. */
body[data-brand-name] .kicker,
body[data-brand-name] .eyebrow,
body[data-brand-name] .brand-eyebrow,
body[data-brand-name] .mono,
body[data-brand-name] .label-mono,
body[data-brand-name] .p-tag,
body[data-brand-name] .price-tag,
body[data-brand-name] .plan-box h4,
body[data-brand-name] .p-stat strong,
body[data-brand-name] .lu-note .mono,
body[data-brand-name] .lu-note a,
body[data-brand-name] .f-bottom .mono,
body[data-brand-name] .vs-cat,
body[data-brand-name] .hero-topline .kicker,
body[data-brand-name] .accent,
body[data-brand-name] .hl,
body[data-brand-name] h3 em {
  color: var(--acc-text) !important;
}

/* 4. Solid buttons: label colour must contrast with the accent fill. */
body[data-brand-name] .btn-primary,
body[data-brand-name] .btn-cta,
body[data-brand-name] .brand-cta,
body[data-brand-name] a.btn,
body[data-brand-name] button.btn,
body[data-brand-name] .nav-cta,
body[data-brand-name] .public-cta,
body[data-brand-name] .workspace-cta,
body[data-brand-name] button[type="submit"],
body[data-brand-name] input[type="submit"] {
  color: var(--btn-fg) !important;
}

/* 5. Panels that still paint the legacy ink/dark background while
      their text is forced to ink -> ink on ink. Cream surface. */
body[data-brand-name] .stats,
body[data-brand-name] .p-stat,
body[data-brand-name] .plan-box,
body[data-brand-name] .lu-card,
body[data-brand-name] .mobile-menu,
body[data-brand-name] .cta-panel,
body[data-brand-name] .includes,
body[data-brand-name] .vs,
body[data-brand-name] .vs-row,
body[data-brand-name] .product,
body[data-brand-name] .why,
body[data-brand-name] .why-card,
body[data-brand-name] .price-card,
body[data-brand-name] .brag-stage-hero,
body[data-brand-name] .brag-stage-feat,
body[data-brand-name] pre,
body[data-brand-name] input,
body[data-brand-name] textarea,
body[data-brand-name] select {
  background: var(--cream) !important;
  background-image: none !important;
  color: var(--ink) !important;
}

body[data-brand-name] .stats,
body[data-brand-name] .p-stat,
body[data-brand-name] .plan-box,
body[data-brand-name] .lu-card,
body[data-brand-name] .cta-panel,
body[data-brand-name] .includes,
body[data-brand-name] .vs,
body[data-brand-name] .price-card,
body[data-brand-name] input,
body[data-brand-name] textarea,
body[data-brand-name] select {
  border-color: var(--ink) !important;
}

/* 6. .stat-label is caught by the huge Fraunces heading group
      (rendered 45px italic); restore it as a small mono label. */
body[data-brand-name] .stat-label {
  font-family: 'Space Mono', Menlo, monospace !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  color: var(--ink-soft) !important;
}

/* 7. Smallest mono labels were 8-9.5px. */
body[data-brand-name] .lu-card span,
body[data-brand-name] .p-stat span,
body[data-brand-name] .chip,
body[data-brand-name] .f-bottom .mono,
body[data-brand-name] .nav .name span,

/* 9. Product cards repaint their own dark gradient with higher
      specificity than #5. */
body[data-brand-name] #features .product,
body[data-brand-name] #products .product,
body[data-brand-name] .product,
body[data-brand-name] .p-head,
body[data-brand-name] .p-body {
  background: var(--cream) !important;
  background-image: none !important;
  border-color: var(--ink) !important;
}

/* 10. Nav surface: keep one surface + ink text in both themes. */
body[data-brand-name] .nav,
body[data-brand-name] .navbar,
body[data-brand-name] .public-nav,
body[data-brand-name] .nav-links,
body[data-brand-name] .nav-inner {
  background: var(--cream) !important;
  border-color: var(--ink) !important;
}
body[data-brand-name] .nav a:not(.btn):not(.nav-cta),
body[data-brand-name] .nav-links a:not(.btn):not(.nav-cta),
body[data-brand-name] .brand-name b,
body[data-brand-name] .brand-name i,
body[data-brand-name] .brand-name span,
body[data-brand-name] .nav .name span {
  color: var(--ink) !important;
}

/* 11. Comparison header cell kept a dark fill in dark mode. */
body[data-brand-name] .vs-head .new,
body[data-brand-name] .vs-row .new {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

/* 12. Emphasised stat digits use the brand accent. */
body[data-brand-name] .stat-num em,
body[data-brand-name] .stat-num strong {
  color: var(--acc-text) !important;
}

/* 13. Button labels: solid, ghost and their arrow spans.
       Placed after 10 so .nav a.btn keeps the button label colour. */
body[data-brand-name] .btn-ghost,
body[data-brand-name] a.btn-ghost {
  background: var(--cream) !important;
  color: var(--ink) !important;
}
body[data-brand-name] .btn span,
body[data-brand-name] .btn-primary span,
body[data-brand-name] .nav-cta span,
body[data-brand-name] a.btn:not(.btn-ghost) span,
body[data-brand-name] button.btn span {
  color: inherit !important;
}
body[data-brand-name] .btn-primary,
body[data-brand-name] .btn-cta,
body[data-brand-name] .brand-cta,
body[data-brand-name] .nav-cta,
body[data-brand-name] .public-cta,
body[data-brand-name] .workspace-cta,
body[data-brand-name] a.btn:not(.btn-ghost),
body[data-brand-name] button.btn:not(.btn-ghost) {
  color: var(--btn-fg) !important;
}


body[data-brand-name] .brand span {
  font-size: 11px !important;
  color: var(--ink-soft) !important;
}

/* 8. Skip link: sat inset -9999px with ink on accent. */
body[data-brand-name] .skip-link {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
}