/* ============================================================
   TIKTOK COMPETITION ANALYZER — SKIN-URI MULTI-BRAND (light)
   Sursă: design-system-dwf-upswing-jumara-skins.html (Claude Design, 16 iul 2026).

   Scoped STRICT pe html[data-brand="dwf"] / html[data-brand="upswing"]
   (atributul e pus de tiktok/js/brand.js, sincron înainte de paint).
   Jumara / try-david.ai NU au atributul acestor branduri → fișierul
   e inert pentru ele; designul dark „Jumara" din tiktok.css rămâne
   sursa de adevăr și baza peste care se aplică skin-urile.

   Arhitectura skin-ului light = „light chrome + insule dark":
   pagina (topbar, hero, selecție, footer) e light, iar cardurile de
   date din raport (charts, tabele, statband) rămân pe fundal dark —
   pattern-ul din design system §07 — re-declarând LOCAL variabilele
   dark, ca SVG-urile calibrate pe dark să nu fie recalibrate.

   Semantica de culori (REGULĂ, toate brandurile): verde = organic,
   cald = paid, identitatea „Tu" = primary-ul brandului.
   ============================================================ */

/* ─────────────────────────── 1. TOKENS DWF ───────────────────────────
   Corporate · precis · enterprise. Electric blue, colțuri strânse. */
html[data-brand="dwf"] {
  /* chrome light — V3 aleasă de Radu (16 iul): neutru foarte soft,
     carduri albe, glow discret de brand sus (regula pe body, mai jos) */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --line: #E3E6EC;
  --line-2: #CDD2DC;
  --track: #E7EAF0;
  --ink: #0C1A3C;
  --soft: #474D5A;
  --muted: #69707F;
  --muted-2: #98A0B0;

  /* brand */
  --orange: #0B49F5;                       /* primary = identitate „Tu" */
  --orange-2: #4C8CFF;
  --orange-tint: rgba(11, 73, 245, .10);
  --lime: #2FBF71;                         /* organic + CTA (award green) */
  --lime-2: #1F8F53;
  --lime-tint: rgba(47, 191, 113, .14);
  --blue: #B0208C;                         /* competitori = magenta (albastrul e identitate) */
  --blue-2: #B0208C;

  /* tokens noi (doar skin-urile light le folosesc) */
  --paid: #E67514;                         /* paid decuplat de identitate */
  --paid-tint: rgba(230, 117, 20, .14);
  --accent-text: #178A4C;                  /* verdele, lizibil ca text pe alb */
  --accent-ink: #0A1130;                   /* text pe suprafețe accent (CTA verde) */
  --primary-border: rgba(11, 73, 245, .35);
  --accent-border: rgba(47, 191, 113, .45);
  /* Insulele dark: slate-navy îndulcit (feedback Radu 16 iul — navy-ul
     aproape negru #0A1130 din design system era prea heavy pe light) */
  --island: #222A52;                       /* cardurile de date */
  --island-2: #2C355F;
  --island-deep: #1A2145;

  /* geometrie + tipografie */
  --font-display: 'Archivo', system-ui, sans-serif;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 6px;
  --r-chip: 6px;
}

/* ───────────────────────── 2. TOKENS UPSWING ─────────────────────────
   Playful · creator-first · energic. Magenta + purple + lime, rotund. */
html[data-brand="upswing"] {
  /* chrome light — V3 ca la DWF (decizie Radu 16 iul): neutru foarte
     soft, carduri albe, glow magenta discret sus (regula pe body, jos) */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --line: #E3E6EC;
  --line-2: #CDD2DC;
  --track: #E7EAF0;
  --ink: #17121C;
  --soft: #3C3544;
  --muted: #6E6579;
  --muted-2: #9A91A6;

  /* brand */
  --orange: #E6008E;                       /* primary = identitate „Tu" */
  --orange-2: #FF6B4A;
  --orange-tint: rgba(230, 0, 142, .10);
  --lime: #C6F24E;                         /* organic + CTA (lime, ca la Jumara) */
  --lime-2: #8FB52F;
  --lime-tint: rgba(198, 242, 78, .18);
  --blue: #7A2FF6;                         /* competitori = purple */
  --blue-2: #7A2FF6;

  /* tokens noi */
  --paid: #E6008E;                         /* paid = primary (per design system) */
  --paid-tint: rgba(230, 0, 142, .12);
  --accent-text: #5C8A00;                  /* lime, lizibil ca text pe alb */
  --accent-ink: #17121C;
  --primary-border: rgba(230, 0, 142, .35);
  --accent-border: rgba(198, 242, 78, .5);
  /* Insulele dark: plum închis îndulcit (același tratament ca la DWF —
     near-black-ul #0D0B10 din design system era prea heavy pe light) */
  --island: #2A2438;                       /* cardurile de date */
  --island-2: #352E45;
  --island-deep: #211C2D;

  /* geometrie + tipografie */
  --font-display: 'Archivo', system-ui, sans-serif;
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-chip: 8px;
}

/* ──────────────────── 3. OVERRIDES STRUCTURALE (ambele skin-uri light) ────────────────────
   Tot ce urmează repară valorile hardcodate pe dark din tiktok.css,
   exprimat în tokens ca să funcționeze pentru orice skin light viitor. */

/* Archivo e variabil pe weight (Anton avea unul singur) — display-ul
   light-skin e heavy, ca în design system. */
html:is([data-brand="dwf"], [data-brand="upswing"]) :is(
  .display, .h-hero, .h-sec, .h-card, .num,
  .stat__num, .kpi__value, .bar__val, .step-card__num,
  .select-title, .select-count b, .load-box__title, .load-box__pct,
  .done-box__title, .verdict__title, .verdict__ghost, .cta-lime__title,
  .hof-winstats__big, .hof-winstats__mid, .hof-rest__rank,
  .vcard__views, .vcard__stat, .video-metric--highlight
) {
  font-weight: 800;
  letter-spacing: -.015em;
}

/* Text hardcodat alb/dark din tiktok.css → tokens */
html:is([data-brand="dwf"], [data-brand="upswing"]) .field input { color: var(--ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .feed__item.is-new { color: var(--ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .feed__item .fdot { background: var(--line-2); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .check--done { color: var(--ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .check--done .check__box { background: var(--ink); color: var(--bg); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .load-box__hint { color: var(--muted-2); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .competitor-row:hover { border-color: var(--line-2); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .competitor-row__checkbox { border-color: var(--line-2); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .btn--dark {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
html:is([data-brand="dwf"], [data-brand="upswing"]) .btn:disabled,
html:is([data-brand="dwf"], [data-brand="upswing"]) .btn.is-disabled {
  background: var(--line);
  color: var(--muted-2);
}

/* Borduri accent hardcodate pe rgba-ul Jumara → tokens per brand */
html:is([data-brand="dwf"], [data-brand="upswing"]) .badge { border-color: var(--primary-border); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .country-badge--ro { border-color: var(--primary-border); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .ai-card { border-color: var(--accent-border); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .card-note--ai { border-color: var(--accent-border); }

/* Paid ≠ identitate pe skin-urile light: barele/chip-urile paid rămân
   pe cald (--paid), identitatea „Tu" merge pe primary-ul brandului. */
html:is([data-brand="dwf"], [data-brand="upswing"]) .fill-orange { background: var(--paid); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .chip-paid {
  background: var(--paid-tint);
  color: var(--paid);
}

/* Accentul (verde/lime) e fill vivid, dar ca TEXT pe chrome-ul light
   are nevoie de varianta închisă. (În insulele dark rămâne vivid.) */
html:is([data-brand="dwf"], [data-brand="upswing"]) :is(
  .c-lime, .error-message.is-info, .hof-winstats__big
) { color: var(--accent-text); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .hero__meta a {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

/* Suprafețe accent: text întunecat, nu var(--bg) (care acum e alb) */
html:is([data-brand="dwf"], [data-brand="upswing"]) .cta-lime { color: var(--accent-ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .btn--lime { color: var(--accent-ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .hof-crown__chip { color: var(--accent-ink); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .seg__btn.is-active { color: var(--accent-ink); }
/* Butonul din CTA are background inline var(--bg) în report.html → !important */
html:is([data-brand="dwf"], [data-brand="upswing"]) .cta-lime .btn {
  background: var(--island) !important;
  color: #fff !important;
}

/* Verdictul stă pe primary; subtitlul Jumara era maro-închis pe orange */
html:is([data-brand="dwf"], [data-brand="upswing"]) .verdict__sub { color: rgba(255, 255, 255, .88); }
html:is([data-brand="dwf"], [data-brand="upswing"]) .verdict__title .dark { color: rgba(255, 255, 255, .55); }

/* ──────────────────── 4. INSULELE DARK (raport) ────────────────────
   Cardurile de date re-declară LOCAL paleta dark → toate componentele
   și SVG-urile dinăuntru randează exact ca pe designul Jumara, doar cu
   accentele brandului. Scoped pe #reportBody ca landing-ul (loading
   card, steps) să rămână light. */
html:is([data-brand="dwf"], [data-brand="upswing"]) :is(
  #reportBody .card,
  #reportBody .table,
  #reportBody .video-grid,
  #reportBody .statband,
  #reportBody .ai-card,
  .vmodal__card
) {
  --bg: var(--island-deep);
  --surface: var(--island);
  --surface-2: var(--island-2);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --track: rgba(255, 255, 255, .14);
  --ink: #FFFFFF;
  --soft: rgba(255, 255, 255, .78);
  --muted: rgba(255, 255, 255, .55);
  --muted-2: rgba(255, 255, 255, .40);
  /* Textul care nu-și setează culoarea moștenea navy-ul paginii — pe
     insula dark moștenirea trebuie să pornească de la ink-ul local. */
  color: var(--ink);
}

/* Fidelitate design system: numerele din statband pe primary */
html:is([data-brand="dwf"], [data-brand="upswing"]) #reportBody .stat__num { color: var(--orange); }

/* Umbre moi (design system --e-2/--e-3) care „așază" blocurile heavy
   pe fundalul light — îndulcesc muchia dură alb ↔ dark/saturat. */
html:is([data-brand="dwf"], [data-brand="upswing"]) :is(
  #reportBody .card,
  #reportBody .table,
  #reportBody .video-grid,
  #reportBody .statband,
  .verdict,
  .cta-lime
) {
  box-shadow: 0 18px 40px rgba(15, 17, 22, .10), 0 6px 12px rgba(15, 17, 22, .06);
}

/* Glow-urile de brand (V3, default pe ambele skin-uri light) */
html[data-brand="dwf"] body {
  background-image: radial-gradient(90% 55% at 72% -12%, rgba(11, 73, 245, .09), transparent 62%);
  background-attachment: fixed;
}
html[data-brand="upswing"] body {
  background-image: radial-gradient(90% 55% at 72% -12%, rgba(230, 0, 142, .08), transparent 62%);
  background-attachment: fixed;
}