/* ============================================================
   INFINURE · Product pages dark-theme override
   Applied on top of existing light-mode stylesheets to align with
   the marketing site design system (Syne + coral #ff6666 + dark).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Instrument+Serif:ital@0;1&family=Syne:wght@400;500;600;700;800&display=swap');

:root {
  /* surfaces — dark */
  --base: #0a0a0b;
  --surface: #111113;
  --raised: #18181c;
  --bg-base: #0a0a0b;
  --bg-surface: #111113;
  --bg-raised: #18181c;
  --bg-elevated: #1f1f25;
  --bg-glass: rgba(255, 255, 255, 0.03);

  /* text — warm off-white */
  --text-primary: #f0ede8;
  --text-secondary: #8a8895;
  --text-muted: #4a4858;
  --fg-1: #f0ede8;
  --fg-2: #8a8895;
  --fg-3: #4a4858;

  /* accent — coral full */
  --accent: #ff6666;
  --accent-dim: rgba(255, 102, 102, 0.15);
  --accent-glow: rgba(255, 102, 102, 0.08);
  --accent-text: #ff6666;

  /* borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.15);

  /* shadows — neumorphic dark */
  --shadow-card: 4px 4px 12px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.06);
  --shadow-card-hover: 6px 6px 18px rgba(0, 0, 0, 0.55), -4px -4px 10px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 102, 102, 0.3);

  /* semantic */
  --success: #2ec878;
  --success-dim: rgba(46, 200, 120, 0.12);
  --success-text: #2ec878;
  --warning: #ffb547;
}

html,
body {
  background: #0a0a0b !important;
  color: #f0ede8 !important;
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings and display — Syne tight letter-spacing */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.track-hero-title,
.ps-card-title,
.h-title,
.logo-text {
  font-family: 'Syne', ui-sans-serif, sans-serif !important;
  letter-spacing: -0.02em;
}

/* Monospace bits — labels, meta, tiny uppercase text */
.tag,
.header-tag,
.tsc-head,
.meta-item {
  font-family: 'DM Mono', ui-monospace, monospace !important;
}

/* ── Header chrome (was light rgba) ── */
.site-header {
  background: rgba(10, 10, 11, 0.82) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  backdrop-filter: saturate(1.4) blur(8px);
}

.logo-text {
  color: #f0ede8 !important;
}
.logo-sub {
  color: #8a8895 !important;
}
.logo-divider {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Invert the Infinure logos (they were designed for light bg) */
.logo img,
.logo-isotipo,
img[class*="logo"] {
  filter: brightness(0) invert(0.95);
}

/* ── Disclaimer / notice bars ── */
.disclaimer-bar {
  background: rgba(255, 102, 102, 0.08) !important;
  border-bottom: 1px solid rgba(255, 102, 102, 0.18) !important;
  color: #8a8895 !important;
}
.disclaimer-bar span {
  color: #ff6666 !important;
}

/* ── Page header row ── */
.page-header {
  background: #111113 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.back {
  color: #ff6666 !important;
}
.sep,
.tsc-sub {
  color: #4a4858 !important;
}

/* ── Cards ── */
.track-summary-card,
.ps-card,
.card,
.panel {
  background: #111113 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.track-summary-card::before {
  background: #111113 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.ps-card.solution {
  border-color: rgba(255, 102, 102, 0.3) !important;
  background: linear-gradient(135deg, #111113 0%, rgba(255, 102, 102, 0.06) 100%) !important;
}
.ps-card:not(.solution) .ps-icon {
  background: #18181c !important;
  color: #8a8895 !important;
}

/* ── Hero emphasis ── */
.section-title em,
.track-hero-title em {
  color: #ff6666 !important;
}

/* ── Buttons ── */
.btn,
.btn-primary,
.btn-ghost,
a.btn {
  font-family: 'Syne', sans-serif !important;
  letter-spacing: -0.01em;
}
.btn-primary,
a.btn-primary {
  background: #ff6666 !important;
  color: #0a0a0b !important;
  border: 0 !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  filter: brightness(1.1);
}
.btn-ghost,
a.btn-ghost {
  background: transparent !important;
  color: #f0ede8 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.btn-ghost:hover,
a.btn-ghost:hover {
  border-color: rgba(255, 102, 102, 0.5) !important;
  color: #ff6666 !important;
}

/* ── Tags / badges ── */
.tag,
.header-tag {
  background: rgba(255, 102, 102, 0.15) !important;
  color: #ff6666 !important;
}
.tag-vertical {
  background: rgba(46, 200, 120, 0.15) !important;
  color: #2ec878 !important;
}

/* ── Numeric / meta icons ── */
.tsc-num,
.meta-icon {
  background: rgba(255, 102, 102, 0.15) !important;
  color: #ff6666 !important;
}

/* ── Highlight rows ── */
.tsc-item.highlight {
  background: rgba(255, 102, 102, 0.12) !important;
  border-left-color: #ff6666 !important;
}

/* ── Links / text bits ── */
a {
  color: inherit;
}
a.text-accent,
a[href*="infinure.com"]:not(.btn) {
  color: #ff6666 !important;
}

/* ── Footer ── */
footer,
.site-footer {
  background: #0a0a0b !important;
  color: #8a8895 !important;
  border-top: 1px solid var(--border-subtle) !important;
}
footer a,
.site-footer a {
  color: #f0ede8 !important;
}
footer a:hover,
.site-footer a:hover {
  color: #ff6666 !important;
}

/* ── Any element that uses white background inline ── */
[style*="background: #FFF"],
[style*="background: #fff"],
[style*="background:#FFF"],
[style*="background:#fff"],
[style*="background: white"] {
  background: #111113 !important;
}

/* ── Scrollbar on dark ── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0a0b;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 102, 102, 0.35);
}

/* ── Selection ── */
::selection {
  background: #ff6666;
  color: #0a0a0b;
}