/* Dark theme repairs for the Best onlyfans house styles.

Two problems in the shared stylesheet of the chain:

1. The house stylesheet declares the light theme as the base and then re-declares
   a few blocks with hard light values (white panel, white shelf cards, white
   chips, white outline buttons). Those blocks sit AFTER the dark theme block,
   so in the dark theme they keep their white background while the text stays
   light — the text simply disappears. Everything below re-declares those
   blocks with the dark palette, so both themes are readable.

2. Inter is named in the font stack but never loaded, so the browser falls
   back to the system font on every page. The @font-face below loads it from
   the domain itself (no third party request, no waiting for a third party).

Both chains of the family (Best onlyfans 1 and 2) use the same stylesheet,
so one file fixes both.
*/

/* ---------- the Inter font, served from our own domain ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter/inter-variable-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter/inter-ext-variable-v1.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- both themes: the variables the house stylesheet never declares ----------

--muted, --ink-2 and a few others are used by the house stylesheet but declared
in neither palette, so the browser falls back to the inherited value: the trust
list under the headline came out in the hero colour, which on the light
background is far too pale. Here they are declared for both themes.
*/
:root {
  --muted: #6b7280;
  --ink-2: #374151;
  --soft: #f8fafc;
  --wash: #f8fafc;
  --brand: #0db1f2;
  --brand-strong: #0995d0;
  --brand-deep: #046b8f;
  --brand-tint: #e8f7fe;
  --danger: #b42318;
  --danger-tint: #fdeceb;
  --good: #0b6b3a;
  --good-tint: #e7f7ef;
  --warn: #8a4b00;
  --warn-tint: #fdf1e0;
  --hero-bg: #0b1220;
  --hero-ink: #eaf2fb;
  --hero-muted: #9fb2c8;
  --accent-free: #0b6b3a;
  --accent-free-tint: #e7f7ef;
  --accent-offer: #8a4b00;
  --accent-offer-tint: #fdf1e0;
  --accent-live: #6d28d9;
  --accent-live-tint: #f3e8ff;
  --ink-band: #f8fafc;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .04);
  --shadow: 0 10px 30px rgba(15, 27, 45, .09);
  --shadow-lg: 0 24px 60px rgba(15, 27, 45, .16);
  --shadow-card: 0 10px 34px rgba(17, 24, 39, .07);
  --shadow-lift: 0 16px 42px rgba(17, 24, 39, .12);
  --grad-brand: linear-gradient(135deg, #2ec6f7 0%, #0db1f2 58%, #0995d0 100%);
  --grad-line: linear-gradient(90deg, #0db1f2 0%, #22c55e 100%);
}

/* ---------- dark theme: the variables the house stylesheet never switches ----------

--soft is used nine times in the house stylesheet (the FAQ band, the price block,
the statistics, the footer, the comparison block, the quick answer band and two
more) but it is declared in neither the light nor the dark palette, so those
bands stay white while the text turns light as well — the text disappears.
The same holds for the small set of variables the dark palette left out.
*/
html[data-theme="dark"] {
  --soft: #101b2d;
  --wash-2: #0d1524;
  --gap: 24px;
  --r: 14px;
  --r-lg: 20px;
  --r-sm: 8px;
  --radius-lg: 22px;
  --ring: rgba(76, 199, 247, .45);
  --font-display: inherit;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hero-ink: #eaf2fb;
  --hero-muted: #9fb2c8;
  --grad-line: linear-gradient(90deg, #0db1f2 0%, #22c55e 100%);
}

/* ---------- dark theme: tables, badges and the weight scale ----------

The comparison table keeps its light head band (--ink-band is light in the
dark palette), the rank badge keeps a dark text on a light chip and the weight
scale keeps dark labels on a bright chip. All three are unreadable in the dark
theme, so they are set here with the dark palette.
*/
html[data-theme="dark"] .bf-table thead th,
html[data-theme="dark"] .bf-matrix-table thead th {
  background: #101b2d;
  color: #cfe0f2;
}
html[data-theme="dark"] .bf-table tbody td,
html[data-theme="dark"] .bf-table tbody th {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
html[data-theme="dark"] .bf-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .03);
}
html[data-theme="dark"] .bf-badge--rank,
html[data-theme="dark"] .bf-index {
  background: var(--grad-brand);
  color: #04202c;
  border-color: transparent;
}
html[data-theme="dark"] .bf-weights__seg {
  color: #04202c;
}
html[data-theme="dark"] .bf-weights__reach {
  background: var(--surface-2);
  color: var(--ink);
}

/* ---------- dark theme: the blocks that kept their light values ---------- */
html[data-theme="dark"] .bf-hero__panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink);
}
html[data-theme="dark"] .bf-panel__title { color: #fff; }
html[data-theme="dark"] .bf-panel__head { border-bottom-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .bf-freshness { color: var(--brand-deep); }

html[data-theme="dark"] .bf-shelf__item {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .bf-shelf__name { color: var(--ink); }
html[data-theme="dark"] .bf-shelf__price { color: var(--muted); }
html[data-theme="dark"] .bf-shelf__bar { background: var(--surface-2); }
html[data-theme="dark"] .bf-shelf__item::after {
  background: rgba(9, 15, 26, .78);
  color: #fff;
}

html[data-theme="dark"] .bf-chip {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink-2);
}
html[data-theme="dark"] .bf-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #05202e;
}

html[data-theme="dark"] .bf-btn--outline {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
  color: #eaf2fb;
}
html[data-theme="dark"] .bf-btn--outline:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
html[data-theme="dark"] .bf-hero .bf-btn--outline {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
  color: #eaf2fb;
}

html[data-theme="dark"] .bf-toc__link {
  background: var(--surface);
  color: var(--ink-2);
}
html[data-theme="dark"] .bf-tray {
  background: var(--surface);
  color: var(--ink);
}
html[data-theme="dark"] .bf-mini__bar { background: var(--surface-2); }
html[data-theme="dark"] .bf-faq__item[open] .bf-faq__sign::before { color: var(--ink); }

/* ---------- dark theme: the quote block of the guide pages ----------

The partner widget stylesheet paints the quote with a fixed light background and
a fixed dark text, so in the dark theme the text vanishes. The frame is redrawn
with the dark palette here.
*/
html[data-theme="dark"] #article-copy blockquote {
  background: var(--surface);
  border-left-color: var(--brand-strong);
}
html[data-theme="dark"] #article-copy blockquote p {
  color: var(--ink);
}


/* ---------- the service pages layer of the two Free chains ----------

The service pages (the long guides and the service articles) use an older
layer of the house that carries its own light palette and never heard of the
theme switch. In the dark theme the white cards, the white header and the
white article box stay white while the text turns light, so the text is
invisible. Everything below repaints that layer with the theme palette.
*/
html[data-theme="dark"] {
  --white: var(--surface);
  --soft: var(--surface-2);
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .subnav {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
html[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 50% 115%, rgba(13, 177, 242, .10), transparent 48%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
html[data-theme="dark"] .header-search,
html[data-theme="dark"] .hero-search {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .header-search:hover,
html[data-theme="dark"] .hero-search:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .hero-search__icon { color: var(--muted); }
html[data-theme="dark"] .hero__stats span { color: var(--muted); }
html[data-theme="dark"] .subnav a { color: var(--ink-2); }

html[data-theme="dark"] .service-note,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .article-jump,
html[data-theme="dark"] .editorial-copy__intro,
html[data-theme="dark"] .live-summary__inner {
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="dark"] .live-summary__table th {
  background: var(--surface-2);
  color: var(--ink);
}
html[data-theme="dark"] .live-summary__table td { color: var(--ink-2); }
html[data-theme="dark"] .live-summary h2 + p,
html[data-theme="dark"] .live-summary__facts span,
html[data-theme="dark"] .service-lead { color: var(--ink-2); }
html[data-theme="dark"] .live-summary__facts span { border-color: var(--line); }
html[data-theme="dark"] .article-nav a,
html[data-theme="dark"] .site-footer { color: var(--ink-2); }
html[data-theme="dark"] .article-nav a:hover { background: var(--surface-2); }
html[data-theme="dark"] .directory__frame--error {
  background: var(--danger-tint);
  border-color: var(--danger);
}

/* ---------- the table heads in the light theme ----------

The house paints the table head with a light band but keeps the text of the
dark theme, so the head is unreadable in the light theme. Here the head gets
the ordinary band and the ordinary text of the light theme.
*/
html:not([data-theme="dark"]) .bf-table thead th,
html:not([data-theme="dark"]) .bf-matrix-table thead th {
  background: var(--surface-2);
  color: var(--ink);
}
html:not([data-theme="dark"]) .bf-frame .editorial-copy th,
html:not([data-theme="dark"]) .bf-frame .comparison-table th {
  background: var(--surface-2);
  color: var(--ink);
}


/* ---------- the article body of the service pages ----------

The service layer paints the article text with a fixed gray and the table head
with a fixed light blue. In the dark theme the text keeps that fixed color on
the dark card and disappears. Here both follow the theme.
*/
#article-copy p,
#article-copy li { color: var(--ink-2); }
#article-copy blockquote {
  background: var(--surface-2);
  border-left-color: var(--primary);
}
#article-copy blockquote p { color: var(--ink); }
#article-copy th {
  background: var(--surface-2);
  color: var(--ink);
}