/**
 * Branch Writing — Royal Lux palette.
 *
 * Retints the page from the cool slate-and-sky-blue scheme to the violet ramp of
 * the Royal Lux Obsidian theme (.obsidian/themes/royal-lux/theme.css):
 *
 *   background-primary      #1c1a23    text-normal        #e6e3f5
 *   background-primary-alt  #22202b    text-muted         #beb9d6
 *   background-secondary    #262432    text-faint         #7e789c
 *   background-secondary-alt#2f2c3d    text-accent        #a89de0
 *   modifier-border         #3a364a    text-accent-hover  #c2b7f0
 *   modifier-border-hover   #4a455f    interactive-accent #9185d1
 *
 * Loaded last, and scoped to html.bw-sales-page-branch-writing throughout —
 * sales-shared/css/variables.css and page-core.css define these tokens for every
 * sales page, so they are overridden here rather than edited at the source.
 *
 * Keep --color-accent and --color-accent-rgb in sync: a lot of this page reaches
 * for rgba(var(--color-accent-rgb), a) and color-mix(in srgb, var(--color-accent))
 * in the same rule, and they will drift apart silently.
 */

html.bw-sales-page-branch-writing {
  /* Accent — text-accent. Drives the section-title glow, the canvas grid, card
     borders, icon chips, every <strong> in body copy. */
  --color-accent: #a89de0;
  --color-accent-rgb: 168, 157, 224;

  /* Surfaces. The alpha on --color-primary-bg is load-bearing (bw-page-grid.css
     paints it over the canvas grid), so it is carried across unchanged. */
  --color-primary-bg: rgba(28, 26, 35, 0.85);
  --color-primary-bg-rgb: 28, 26, 35;
  --color-secondary-bg: #22202b;
  --color-card-bg: #262432;
  --color-sticky-bar: #2f2c3d;
  --color-cta-primary: #9185d1;

  /* Text ramp */
  --color-text-primary: #e6e3f5;
  --color-text-secondary: #cdc8e4;
  --color-text-muted: #beb9d6;

  /* Royal Lux border, for the hardcoded gray-700 utilities further down */
  --bw-rl-border-rgb: 58, 54, 74;
  --bw-rl-border-hover-rgb: 74, 69, 95;
}

/* Scrollbars — page-core.css hardcodes the cool slate #3a4448 / #1b2023 pair. */
html.bw-sales-page-branch-writing {
  scrollbar-color: #4a455f #1c1a23;
}

html.bw-sales-page-branch-writing::-webkit-scrollbar-track,
html.bw-sales-page-branch-writing body::-webkit-scrollbar-track {
  background: #1c1a23;
}

html.bw-sales-page-branch-writing::-webkit-scrollbar-thumb,
html.bw-sales-page-branch-writing body::-webkit-scrollbar-thumb {
  background-color: #4a455f;
  border-color: #1c1a23;
}

html.bw-sales-page-branch-writing::-webkit-scrollbar-thumb:hover,
html.bw-sales-page-branch-writing body::-webkit-scrollbar-thumb:hover {
  background-color: #5b5573;
}

/* ---------- Hardcoded neutrals ---------- */

/* Headings are set to #fff in bw-section-title.css / bw-hero-title.css. Royal Lux
   tops out at #e6e3f5, and pure white against a violet ground reads as a
   different palette bolted on. */
html.bw-sales-page-branch-writing #__next .section__title,
html.bw-sales-page-branch-writing #__next .sales-hero-title,
html.bw-sales-page-branch-writing #__next .bw-hero-title,
html.bw-sales-page-branch-writing #__next .bw-emphasis-line,
html.bw-sales-page-branch-writing #__next .bw-hero-mini-card-title,
html.bw-sales-page-branch-writing #__next .bw-price {
  color: var(--color-text-primary) !important;
}

html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-support-copy {
  color: var(--color-text-muted) !important;
}

/* Card borders: the markup uses Tailwind's border-gray-700/30 and /50, which are
   slate rgb(55 65 81). */
html.bw-sales-page-branch-writing #__next .border-gray-700\/30 {
  border-color: rgba(var(--bw-rl-border-rgb), 0.55) !important;
}

html.bw-sales-page-branch-writing #__next .border-gray-700\/50 {
  border-color: rgba(var(--bw-rl-border-rgb), 0.8) !important;
}

html.bw-sales-page-branch-writing #__next .border-gray-700 {
  border-color: rgb(var(--bw-rl-border-rgb)) !important;
}

/* ---------- Pricing ---------- */

/* The guarantee badge is the one block still on the old sky-blue (#60a5fa /
   #dbeafe), which clashes hardest with violet since they sit adjacent. */
html.bw-sales-page-branch-writing #__next .pricing-guarantee {
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-rgb), 0.18) 0%,
    rgba(145, 133, 209, 0.1) 100%
  ) !important;
  border-color: rgba(var(--color-accent-rgb), 0.34) !important;
  box-shadow:
    0 4px 14px rgba(145, 133, 209, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #ded8f5 !important;
}

html.bw-sales-page-branch-writing #__next .pricing-guarantee-icon {
  color: var(--color-accent) !important;
}

html.bw-sales-page-branch-writing #__next .pricing-card-premium .pricing-guarantee {
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-rgb), 0.22) 0%,
    rgba(145, 133, 209, 0.12) 100%
  ) !important;
  border-color: rgba(var(--color-accent-rgb), 0.4) !important;
  box-shadow:
    0 4px 14px rgba(145, 133, 209, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #efecfb !important;
}

html.bw-sales-page-branch-writing #__next .pricing-card-premium .pricing-guarantee-icon {
  color: #c2b7f0 !important;
}

/* Plan label — slate rgb(148,163,184) */
html.bw-sales-page-branch-writing #__next .pricing-label {
  color: rgba(190, 185, 214, 0.85) !important;
}

/* ---------- Countdown ---------- */

/* bw-countdown.css reads accent and surface from the tokens already (the #60a5fa
   and #0b1120 in it are only var() fallbacks), so those follow automatically.
   Its greys are hardcoded Tailwind slate — slate-200 rgb(226,232,240) for copy
   and slate-400 rgb(148,163,184) for labels — which stay cool against the violet.
   Not scoped to #__next: the modal mounts outside the page wrapper. */
html.bw-sales-page-branch-writing .bw-countdown-label-row {
  color: rgba(230, 227, 245, 0.9);
}

html.bw-sales-page-branch-writing .bw-countdown-value,
html.bw-sales-page-branch-writing .bw-countdown-modal-title,
html.bw-sales-page-branch-writing .bw-countdown-modal-close:hover,
html.bw-sales-page-branch-writing .bw-countdown-modal-input {
  color: var(--color-text-primary);
}

html.bw-sales-page-branch-writing .bw-countdown-unit,
html.bw-sales-page-branch-writing .bw-countdown-note,
html.bw-sales-page-branch-writing .bw-countdown-modal-label,
html.bw-sales-page-branch-writing .bw-countdown-modal-close {
  color: rgba(190, 185, 214, 0.85);
}

html.bw-sales-page-branch-writing .bw-countdown-separator {
  color: rgba(126, 120, 156, 0.9);
}

html.bw-sales-page-branch-writing .bw-countdown-modal-description {
  color: rgba(230, 227, 245, 0.85);
}

html.bw-sales-page-branch-writing .bw-countdown-modal-overlay {
  background: rgba(15, 13, 22, 0.78);
}

html.bw-sales-page-branch-writing .bw-countdown-modal-input {
  background: rgba(34, 32, 43, 0.9);
  border-color: rgba(var(--bw-rl-border-hover-rgb), 0.7);
}

html.bw-sales-page-branch-writing .bw-countdown-modal-submit {
  color: var(--color-text-primary);
}

/* ---------- Checkout ---------- */

/* bw-whop-checkout.css paints the embedded checkout panels #23272b, a cool grey
   that sits a step off the violet ground once everything around it moves. Only
   applies when the page is in Whop embed mode (body.bw-checkout-whop). */
html.bw-sales-page-branch-writing .bw-checkout-whop #pricing .pricing-card.pricing-card-standard,
html.bw-sales-page-branch-writing .bw-checkout-whop #pricing .pricing-header,
html.bw-sales-page-branch-writing .bw-checkout-whop .bw-whop-checkout-wrap,
html.bw-sales-page-branch-writing .bw-checkout-whop #pricing .bw-whop-checkout-embed {
  background: var(--color-card-bg) !important;
}