/**
 * ForexCracked — Design Tokens
 * ════════════════════════════════════════════════════════════════════════
 * The canonical source of every design-system variable. Loaded FIRST on
 * every page (see fc_enqueue_styles in functions.php) so --fcb-* tokens and
 * the .light-surface re-themer resolve site-wide — not just on broker pages.
 *
 * Spec + rationale: docs/design-system/tokens.md  +  surfaces.md
 *
 * Moved here from broker.css (Phase 1.1 of docs/design-system/migration-plan.md).
 * Do not re-add token declarations to broker.css / portal.css — extend this file.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Brand constants — surface-independent ────────────────────────────────
   These never change between dark and light surfaces, so they live on :root
   and resolve on EVERY page — not just .fcb-page bodies. Colours/sizes that
   DO flip per surface stay in the .fcb-page / .light-surface blocks below. */
:root {
	--fcb-accent:          #14b8a6;
	--fcb-accent2:         #a855f7;
	--fcb-orange:          #f97316;
	--fcb-grad:            linear-gradient(135deg, #14b8a6, #a855f7);
	--fcb-grad-soft:       linear-gradient(135deg, rgba(20,184,166,0.12), rgba(168,85,247,0.12));
	--fcb-radius:          14px;
	--fcb-radius-lg:       18px;
	--fcb-section-gap:     clamp(2.5rem, 4vw, 4rem);
	--fcb-subsection-gap:  clamp(1.5rem, 2.5vw, 2.25rem);
	--fcb-font-display:    'Montserrat', sans-serif;
	--fcb-font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ── Dark surface (default) ───────────────────────────────────────────────
   Applied to .fcb-page (hand-crafted broker/propfirm/glossary/learn reviews)
   and .fc-homepage-strip-zone (the homepage editorial-picks block). */
.fcb-page,
.fc-homepage-strip-zone {
	--fcb-bg:              #0a0f1a;
	--fcb-card:            rgba(15, 23, 42, 0.85);
	--fcb-card-raised:     rgba(30, 41, 59, 0.85);
	--fcb-card-sunk:       rgba(0, 0, 0, 0.30);
	--fcb-border:          rgba(255, 255, 255, 0.10);
	--fcb-border-strong:   rgba(255, 255, 255, 0.18);
	--fcb-text:            rgba(255, 255, 255, 0.92);
	--fcb-text-soft:       rgba(255, 255, 255, 0.78);
	--fcb-text-mute:       rgba(255, 255, 255, 0.55);
	--fcb-text-faint:      rgba(255, 255, 255, 0.40);
	--fcb-accent:          #14b8a6;
	--fcb-accent-text:     #5eead4;
	--fcb-accent2:         #a855f7;
	--fcb-orange:          #f97316;
	--fcb-good:            #34d399;
	--fcb-warn:            #f59e0b;
	--fcb-danger:          #f43f5e;
	--fcb-grad:            linear-gradient(135deg, #14b8a6, #a855f7);
	--fcb-grad-soft:       linear-gradient(135deg, rgba(20,184,166,0.12), rgba(168,85,247,0.12));
	--fcb-radius:          14px;
	--fcb-radius-lg:       18px;
	--fcb-section-gap:     clamp(2.5rem, 4vw, 4rem);
	--fcb-subsection-gap:  clamp(1.5rem, 2.5vw, 2.25rem);
	--fcb-font-display:    'Montserrat', sans-serif;
	--fcb-font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ============================================================================
   LIGHT SURFACE — re-themer for cards / content panels
   ----------------------------------------------------------------------------
   Apply `.light-surface` to any container that should flip to white-on-dark
   instead of inheriting the .fcb-page dark glass. Re-scopes every --fcb-*
   token; component CSS reads through these vars automatically.

   Mockup reference: docs/mockup/broker-light-preview.html
   ============================================================================ */
.light-surface {
	--fcb-card:           #ffffff;
	--fcb-card-raised:    #f8fafc;
	--fcb-card-sunk:      #f1f5f9;
	--fcb-border:         rgba(15, 23, 42, 0.10);
	--fcb-border-strong:  rgba(15, 23, 42, 0.18);
	--fcb-text:           #0f172a;
	--fcb-text-soft:      #334155;
	--fcb-text-mute:      #64748b;
	--fcb-text-faint:     #94a3b8;
	--fcb-good:           #059669;
	--fcb-warn:           #d97706;
	--fcb-danger:         #dc2626;
	--fcb-accent-text:    #0d9488;
	color: var(--fcb-text);
}

/* Pills on white need bumped saturation + darker text. */
.light-surface .fcb-pill--good   { background: rgba(5,150,105,0.10);  color: var(--fcb-good);    border-color: rgba(5,150,105,0.25); }
.light-surface .fcb-pill--warn   { background: rgba(217,119,6,0.10);  color: var(--fcb-warn);    border-color: rgba(217,119,6,0.25); }
.light-surface .fcb-pill--bad    { background: rgba(220,38,38,0.10);  color: var(--fcb-danger);  border-color: rgba(220,38,38,0.25); }
.light-surface .fcb-pill--teal   { background: rgba(20,184,166,0.10); color: var(--fcb-accent-text); border-color: rgba(20,184,166,0.30); }
.light-surface .fcb-pill--purple { background: rgba(168,85,247,0.10); color: #7c3aed;            border-color: rgba(168,85,247,0.25); }
.light-surface .fcb-pill--orange { background: rgba(249,115,22,0.10); color: #c2410c;            border-color: rgba(249,115,22,0.25); }
.light-surface .fcb-pill--neut   { background: rgba(100,116,139,0.08); color: var(--fcb-text-soft); border-color: rgba(100,116,139,0.20); }

/* Best-for pill on white — re-saturate teal for visibility. */
.light-surface .fcb-bestfor-pill {
	background: rgba(20,184,166,0.08);
	border-color: rgba(20,184,166,0.30);
	color: var(--fcb-accent-text);
}

/* Stars on white — amber reads better than the dark-mode soft teal. */
.light-surface .fcb-stars { color: rgba(15,23,42,0.18); }
.light-surface .fcb-stars__fg { color: #f59e0b; }

/* The card itself on a dark page bg needs a real shadow to anchor it. */
.fcb-card.light-surface {
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.fcb-card.light-surface:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25); border-color: var(--fcb-border-strong); }
.fcb-card.light-surface.is-expanded { border-color: rgba(20,184,166,0.45); }
.fcb-card.light-surface.is-featured { background: linear-gradient(135deg, rgba(249,115,22,0.04), rgba(168,85,247,0.03)), #ffffff; }

/* Secondary CTA on white needs a slightly different hover bg. */
.light-surface .fcb-card__cta--secondary:hover { background: rgba(20,184,166,0.06); border-color: rgba(20,184,166,0.40); color: var(--fcb-text); }

/* Expand pill light-surface base + hover styles are consolidated up by the
   .fcb-card__compare-chip pill block. Only the is-expanded state lives here. */
.light-surface.is-expanded .fcb-card__expand,
.fcb-card.light-surface.is-expanded .fcb-card__expand { color: var(--fcb-accent-text); border-color: rgba(20,184,166,0.40); }

/* Featured rank pill keeps its orange gradient (already legible on white). */

/* ─── Per-broker review components — text colors that were hardcoded
       to `color: white` and become invisible on a white surface. The
       token resolves to almost-white on dark and slate-900 on light, so
       this single rule covers both surfaces. Hover states with teal-
       tinted backgrounds get the same fix. */
.light-surface .fcb-hero__title,
.light-surface .fcb-module__title,
.light-surface .fcb-bestfor__title,
.light-surface .fcb-author__name,
.light-surface .fcb-fact__value,
.light-surface .fcb-stat-ribbon__value,
.light-surface .fcb-axis-btn__score,
.light-surface .fcb-axis-inline__value-text,
.light-surface .fcb-axis-intro__lead,
.light-surface .fcb-breakdown__sub-score,
.light-surface .fcb-table .cell--strong,
.light-surface .fcb-toc__list li a.is-active,
.light-surface .fcb-status-card__title,
.light-surface .fcb-module__body strong {
	color: var(--fcb-text);
}
.light-surface .fcb-sub-rating:hover,
.light-surface .fcb-expander:hover,
.light-surface .fcb-collapse-end:hover,
.light-surface .fcb-breakdown__sub-link:hover {
	color: var(--fcb-text);
}

/* Subtle white-on-dark highlights become invisible on white surfaces.
   Re-tone any rgba(255,255,255,...) background to a dark-alpha equivalent. */
.light-surface .fcb-hero::before { background: radial-gradient(circle at top right, rgba(20,184,166,0.08), transparent 60%); }

/* Per-broker review content panels — .fcb-intro / .fcb-main / .fcb-outro
   become white panels themselves so the sections inside (.fcb-module which
   has no background of its own) have a white surface behind their now-dark
   text. Hero loses its own card chrome so it doesn't nest a card-in-card. */
.fcb-intro.light-surface,
.fcb-main.light-surface,
.fcb-outro.light-surface {
	background: var(--fcb-card);
	border: 1px solid var(--fcb-border);
	border-radius: var(--fcb-radius-lg);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	box-shadow: 0 8px 28px rgba(0,0,0,0.20);
	margin: 1rem auto; /* keep .fcb-container's horizontal centering */
}

/* Mobile fix: when the .light-surface panel IS also the .fcb-container
   (single-broker hero + outro wrappers), the `margin: 1rem auto` above
   collapses to 0 on screens narrower than max-width — the box fills the
   full viewport with no visible side gap. Force explicit 10px side
   margins on mobile. Higher specificity (3 classes) beats the base rule
   above (2 classes). .fcb-main.light-surface is left untouched since
   it stretches inside an .fcb-layout grid track that already has the
   10px container padding around it. */
@media (max-width: 1199px) {
	.fcb-container.fcb-intro.light-surface,
	.fcb-container.fcb-outro.light-surface {
		margin: 1rem 10px;
	}
}

/* Hero inside a light-surface intro panel: drop the inner card chrome. */
.light-surface .fcb-hero {
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}
.light-surface .fcb-hero::before { display: none; }

/* Section dividers between numbered modules — visible on white. */
.light-surface .fcb-module + .fcb-module { border-top-color: var(--fcb-border); }

/* User-review header gradient retunes lightly on white. */
.light-surface .fcb-uvr__head--has-reviews,
.light-surface .fcb-uvr__head--empty {
	background: linear-gradient(135deg, rgba(20,184,166,0.05), rgba(168,85,247,0.04));
}