/* ============================================================
   FXScalpers — Premium visual layer (2026-07-13)
   ============================================================
   Founder brief: bring fxscalpers.net up to the premium identity
   locked in brand/README.md + cong-ty/fxscalpers/GU-HINH-ANH.md
   (concept B — serif "FX" monogram, restrained palette, warm
   near-black, generous whitespace, no cheap glow).

   RULE FOR THIS FILE (do not violate on future edits):
   This is a LAYER on top of the existing 5-scheme system in
   themes.css/main.css (Light / Dark / Dune / Matrix / Royal),
   loaded via <link> AFTER main.css. It must never:
     - remove or disable the theme switcher (.fxs-theme-btn) or
       any of its 5 targets,
     - hardcode ONE accent color across every scheme,
     - touch copy/CTA text or the IB/Telegram funnel links.
   Everything below is either (a) scheme-agnostic — typography,
   spacing, component polish, applies identically to all 5
   palettes — or (b) explicitly scoped to a single
   [data-theme="..."] to retune THAT palette's own accent/tokens,
   never another palette's identity. Matrix (terminal green) and
   Royal (bordeaux + gold) already carry their own premium-coded
   accents and are intentionally left untouched here.
   ============================================================ */

/* ---------------------------------------------------------------
   1. Typography — ONE uniform sans (SN Pro) for ALL text: menu, hero,
   titles, excerpt, body. Serif (Cormorant) is reserved for the LOGO
   only (§4), as a single distinctive brand mark. Decision 2026-07-13:
   founder wanted genuine premium + fully consistent type; a serif/sans
   split kept reading as inconsistent, so we unify on the sans and let
   hierarchy come from size/weight/spacing + the emerald/charcoal palette.
   --------------------------------------------------------------- */
:root {
  --gh-font-heading: "SN Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fxs-gold: #C9A25A; /* champagne accent — decorative use only, see §5 */
}

/* The theme's own h1..h6 rule (main.css) already reads
   --gh-font-heading !important, so the variable swap above is
   enough to re-typeset every heading site-wide. Only the negative
   letter-spacing tuned for a tight sans headline needs softening —
   serif reads cramped at -0.03/-0.045em. */
.fxs-hybrid-hero h1,
.fxs-page-header h1,
.fxs-hub-hero h1,
.fxs-funnel-hero h1,
.fxs-post-content h1,
.fxs-reading-title,
.fxs-project-title,
.fxs-product-title,
.fxs-podcast-title {
  letter-spacing: -0.008em !important;
  font-weight: 600 !important;
}

/* Uppercase micro-labels get a little more air — a small, cheap
   move that reads far less "default template". */
.fxs-kicker,
.fxs-side-kicker,
.fxs-nav-section-title {
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------
   2. Generous whitespace — hero + logo lockup + primary CTA.
   --------------------------------------------------------------- */
.fxs-hybrid-hero {
  padding: 96px 56px 72px;
}
.fxs-brand {
  padding: 26px 20px 22px !important;
}
.fxs-hero-actions {
  margin-top: 30px;
}
.fxs-hero-actions .fxs-btn {
  padding: 10px 22px;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   3. Remove cheap glow. These two rules were hardcoded purple
   (rgb(109 53 245)) regardless of the active scheme's real accent
   — a leftover that broke Dark/Dune/Matrix/Royal alike. Now every
   scheme tints its own glow, and the glow itself is subtler.
   --------------------------------------------------------------- */
.fxs-nav-auth .fxs-btn-primary {
  box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 16%, transparent) !important;
}
.fxs-filter-tab.active {
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 14%, transparent);
}

/* Hero avatar mark: was a 2-stop accent gradient circle (the exact
   "cheap glow/gradient" the brand guide calls out). Flattened to a
   neutral badge — the FX candle glyph inside already carries the
   accent color via fill="var(--accent)" in home.hbs, so the accent
   still reads, just without the gradient/glow. */
.fxs-hero-avatar {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  box-shadow: none;
}

/* ---------------------------------------------------------------
   4. Logo lockup — live HTML/CSS text wordmark, NOT a raster image.
   Founder feedback (2026-07-13): the old fixed-cream-ink PNG wordmark
   looked wrong on light schemes (Light/Dune) and needed a second SVG
   lockup just to cope. A pure-text mark sidesteps this permanently:
   "FX" always takes the scheme's own --accent, "Scalpers" always takes
   the scheme's own text color via currentColor (set on .fxs-logo below)
   — so it is legible and on-brand on all 5 schemes with zero per-scheme
   branching. Markup: partials/sidebar-left.hbs (.fxs-logo-text wraps
   both spans; that class also carries the pre-existing mobile-header
   overflow/ellipsis rules in main.css, so it stays truncation-safe).
   --------------------------------------------------------------- */
.fxs-logo-text {
  display: inline-flex;
  align-items: baseline;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* serif kept for the logo mark only */
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fxs-logo-fx {
  color: var(--accent);
}
.fxs-logo-scalpers {
  color: currentColor;
}

/* ---------------------------------------------------------------
   7. Language switcher VN|EN — song ngữ (i18n.js). Đặt cạnh switcher
   màu trong footer sidebar phải; scheme-agnostic (dùng token của scheme
   đang bật, không hardcode màu) nên hợp cả 5 palette. Cặp pill chữ nhỏ,
   tiết chế — nút đang chọn viền + chữ theo --accent của scheme.
   --------------------------------------------------------------- */
.fxs-lang-switcher {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  overflow: hidden;
}
.fxs-lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font: 600 11px/1.6 var(--gh-font-heading);
  letter-spacing: 0.06em;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--transition, 0.2s), background var(--transition, 0.2s);
}
.fxs-lang-btn + .fxs-lang-btn { border-left: 1px solid var(--border-2); }
.fxs-lang-btn:hover { color: var(--text-0); }
.fxs-lang-btn.active {
  color: var(--fxs-accent-contrast, var(--bg-0));
  background: var(--accent);
}

/* Mobile: sidebar phải ẩn nên main.js clone nút VN|EN ra 1 pill nổi, xếp NGAY
   TRÊN pill switcher màu (bottom 14px) để không đè nhau. Ẩn desktop; ẩn khi mở
   menu (giống switcher màu) để không che CTA. */
.fxs-mobile-lang-switcher { display: none; }
@media (max-width: 1120px) {
  .fxs-mobile-lang-switcher {
    position: fixed !important;
    left: 50% !important;
    bottom: 54px !important;
    transform: translateX(-50%) !important;
    z-index: 1205 !important;
    display: inline-flex !important;
    margin-top: 0 !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border-1)) !important;
    background: color-mix(in oklab, var(--bg-0) 90%, var(--bg-1)) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(14px) !important;
  }
  .fxs-mobile-lang-switcher .fxs-lang-btn {
    height: 29px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 820px) {
  body.nav-open .fxs-mobile-lang-switcher {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Link "Read in English / Đọc bản tiếng Việt" chèn đầu bài đã dịch (i18n.js
   injectArticleLangLink). Nhẹ, scheme-agnostic. */
.fxs-article-altlang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font: 600 13px/1.4 var(--gh-font-heading);
  color: var(--text-1);
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color var(--transition, 0.2s), color var(--transition, 0.2s);
}
.fxs-article-altlang:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------
   5. Champagne gold — sparing, decorative use only. Never applied
   to the primary conversion accent (--accent stays per-scheme, see
   the theme switcher note above.)
   --------------------------------------------------------------- */
.fxs-quote-author {
  color: var(--fxs-gold);
}

/* ---------------------------------------------------------------
   6. Dark scheme = the brand's flagship premium look. Its slot in
   the switcher ([data-theme="default-dark"]) is untouched
   structurally — this only retunes ITS OWN tokens toward the
   founder-approved warm near-black + emerald palette
   (brand/README.md). Light, Dune, Matrix and Royal keep their own
   curated colors exactly as originally built.
   --------------------------------------------------------------- */
html[data-theme="default-dark"] {
  --bg-0: #0B0E13;
  --bg-1: #141A22;
  --bg-2: #1B222C;
  --bg-3: #232B36;
  --border-0: #1E2530;
  --border-1: #29323F;
  --border-2: #34404F;
  --border-3: #46566A;
  --text-0: #EFE9DC;
  --text-1: #C7C2B4;
  --text-2: #8C97A6;
  --text-3: #626C7A;
  --accent: #2FB183;
  --fxs-accent-on: #0B0E13;
  --fxs-accent-contrast: #0B0E13 !important;
  --fxs-accent-top: color-mix(in oklab, #2FB183 88%, white 10%);
  --fxs-accent-bottom: color-mix(in oklab, #2FB183 88%, black 10%);
}