@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============================================================================
   LoopSuite dark theme — matches the "Hire AI employees" homepage.

   Loaded LAST, after ds.css + skin.css. The site is fully token-driven, so
   most of the re-skin happens by redefining the design-system variables;
   the rest fixes places where the older sheets hardcoded white/indigo.

   skin.css declares several tokens with !important, so the overrides here
   must be !important too — an !important custom property wins regardless of
   source order.
   ========================================================================== */

:root {
  /* ===== Brand: the old brick-red accent becomes brand green ===== */
  --brand-red:        #c6ff34 !important;
  --brand-red-strong: #a9e400 !important;
  --brand-red-deep:   #95c438 !important;
  --brand-ink:        #08090a !important;
  --accent:           #c6ff34 !important;
  --accent-soft:      rgba(198,255,52,.10) !important;
  --highlight:        #c6ff34 !important;
  --highlight-soft:   rgba(198,255,52,.10) !important;
  --indigo:           #c6ff34 !important;
  --indigo-hover:     #a9e400 !important;

  /* ===== Canvas / surfaces ===== */
  --canvas:              #0a0b0d !important;
  --canvas-alt:          #101215 !important;
  --surface:             rgba(255,255,255,.04) !important;
  --surface-strong:      #14171b !important;
  --surface-subtle:      #15181c !important;
  --control-fill:        rgba(255,255,255,.06) !important;
  --control-fill-strong: rgba(255,255,255,.10) !important;

  /* ===== Ink ===== */
  --ink:            #f3f5f7 !important;
  --text-primary:   #f3f5f7 !important;
  --text-secondary: #c3cad1 !important;
  --text-tertiary:  #8b949e !important;
  --text-muted:     #8b949e !important;
  --text-inverse:   #0a0b0d !important;
  /* Several pages use var(--muted,#555), which was never defined anywhere —
     it silently fell back to dark grey and is unreadable on dark. */
  --muted:          #a9b1ba !important;

  /* ===== Lines ===== */
  --border:        rgba(255,255,255,.09) !important;
  --border-strong: rgba(255,255,255,.15) !important;

  /* ===== Actions — green fill, dark label ===== */
  --primary-fill:   #c6ff34 !important;
  --primary-text:   #0a0b0d !important;
  --cta-fill:       #c6ff34 !important;
  --cta-text:       #0a0b0d !important;
  --cta-fill-hover: #d4ff5c !important;

  /* ===== Semantic (lifted for dark) ===== */
  --success: #7ee08a !important; --success-soft: rgba(126,224,138,.12) !important;
  --danger:  #ff8b8b !important; --danger-soft:  rgba(255,139,139,.12) !important;
  --warning: #ffc46b !important; --warning-soft: rgba(255,196,107,.12) !important;

  /* ===== Type ===== */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --font-sans:    "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --font-rounded: "Sora", ui-sans-serif, system-ui, sans-serif !important;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  --tracking-tight: -.03em !important;

  /* ===== Shape — tighter than the old very-round brand ===== */
  --radius-xs: 8px !important;  --radius-sm: 12px !important; --radius-control: 12px !important;
  --radius: 16px !important;    --radius-lg: 18px !important; --radius-xl: 24px !important;

  /* ===== Elevation / glass ===== */
  --shadow-card:  0 10px 30px -18px rgba(0,0,0,.8) !important;
  --shadow-panel: 0 24px 50px -30px rgba(0,0,0,.85) !important;
  --shadow-pop:   0 26px 60px -28px rgba(0,0,0,.9) !important;
  --glass-bg:     rgba(10,11,13,.72) !important;
  --glass-border: rgba(255,255,255,.10) !important;
  --glass-blur:   blur(16px) saturate(140%) !important;
  --ring: 0 0 0 3px rgba(198,255,52,.35) !important;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { background: #0a0b0d; }
body, .ex-body {
  background: var(--canvas) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
}
h1, h2, h3, h4, h5 { color: var(--text-primary) !important; }
p, li { color: var(--text-secondary); }
strong, b { color: var(--text-primary); }
hr { border-color: var(--border) !important; }

/* ── Logo: pages ship a dark-ink wordmark; the swap to the light file
      happens in the HTML, this is a safety net for any missed image ── */
.logo img[src*="logo-wordmark-dark"],
.foot img[src*="logo-wordmark-dark"],
img[src*="loopsuite_logo"] { filter: brightness(0) invert(1); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .nav-cta, .button.btn-primary, .btn.btn-primary, .ds-btn-primary {
  background: var(--cta-fill) !important;
  color: var(--cta-text) !important;
  box-shadow: 0 10px 28px -12px rgba(198,255,52,.45) !important;
}
.btn-primary:hover, .nav-cta:hover, .ds-btn-primary:hover {
  background: var(--cta-fill-hover) !important;
  box-shadow: 0 16px 36px -12px rgba(198,255,52,.55) !important;
}
.btn-ghost, .btn.btn-ghost, .ds-btn-ghost, .btn-store-light {
  background: var(--control-fill) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover, .ds-btn-ghost:hover { background: var(--control-fill-strong) !important; }
.btn-store, .btn-store:hover { background: var(--control-fill) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }

/* ── Header / nav ─────────────────────────────────────────────────────── */
header, .nav, .ex-head, header.nav, .site-header {
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav-links a { color: var(--text-secondary) !important; }
.nav-links a:hover, .nav-links a.active { color: var(--text-primary) !important; }
.logo, .logo span { color: var(--text-primary) !important; }
#mobileNav, .mobile-nav { background: var(--canvas) !important; border-color: var(--border) !important; }
#mobileNav a, .mobile-nav a { color: var(--text-primary) !important; border-color: var(--border) !important; }

/* ── Surfaces / cards ─────────────────────────────────────────────────── */
.card, .ocard, .intg-card, .price-card, .chatcard, .step, .plan, .q-step, .q-trust,
.faq details, .surface-card, .proof-card, .workflow-card, .legal-card, .mode-card,
.landing-visual-card, .ds-card, .pcard, .tile, .panel, .tool, .tool-card, .use-card,
.feature-card, .stat-card, .quote-card, .note, .callout {
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
}
.card:hover, .intg-card:hover, .ocard:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-panel) !important; }

/* ── Bands / sections ─────────────────────────────────────────────────── */
.band-white { background: var(--canvas-alt) !important; }
.band-green, .band-indigo { background: var(--canvas-alt) !important; color: var(--text-primary) !important; }
section { background-color: transparent; }

/* ── Eyebrows, pills, badges ──────────────────────────────────────────── */
.eyebrow, .sec-tag, .q-eyebrow, .ex-eyebrow, .plat-eyebrow, .ds-eyebrow {
  background: transparent !important;
  color: var(--text-tertiary) !important;
  border-color: var(--border) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}
.pill, .badge, .plat-badge, .ex-badge, .ds-pill, .chip {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Feature / final CTA panels ───────────────────────────────────────── */
.cta-band, .final, .ex-cta.dark {
  background: linear-gradient(180deg,#101215,#08090a) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.cta-band h2, .final h2, .cta-band p, .final p { color: var(--text-primary) !important; }
.cta-band .btn-primary, .final .btn-primary {
  background: var(--cta-fill) !important;
  color: var(--cta-text) !important;
}
.final::after { background: transparent !important; }

/* ── Anything sitting on the green fill needs a dark label ────────────── */
.step b, .q-step b, .intg-chip.active, .flow-step.is-done .flow-num, #lsc-accept {
  color: var(--cta-text) !important;
}
.bubble.me, .bubble.user { background: var(--brand-red) !important; color: var(--cta-text) !important; }
.bubble.me svg path, .bubble.me .tail path { fill: var(--brand-red) !important; }
.check svg, .trust-note svg, .q-trust svg, .ex-reassure svg { color: var(--brand-red) !important; }

/* ── Assistant bubbles / inner app chrome ─────────────────────────────── */
.bubble.ai, .bubble.assistant {
  background: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

/* ── Phone mocks: dark screens, like the homepage ─────────────────────── */
.phone-screen, .q-mock-screen, .device-screen {
  background: #101215 !important;
  color: var(--text-primary) !important;
}
.phone-screen p, .device-screen p, .q-mock-screen p { color: var(--text-secondary) !important; }

/* ── Forms / inputs ───────────────────────────────────────────────────── */
input, select, textarea, .intg-search, .intg-chip {
  background: var(--surface-subtle) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary) !important; }
.intg-chip.active { background: var(--cta-fill) !important; border-color: var(--cta-fill) !important; }

/* ── Tables (legal / pricing detail) ──────────────────────────────────── */
table { color: var(--text-secondary) !important; border-color: var(--border) !important; }
th { color: var(--text-primary) !important; }
th, td { border-color: var(--border) !important; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot, .ex-foot, .foot-top, .foot-bottom, .site-footer {
  background: var(--canvas-alt) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.foot a, .ex-foot a, .site-footer a { color: var(--text-secondary) !important; }
.foot a:hover, .ex-foot a:hover, .site-footer a:hover { color: var(--brand-red) !important; }
.foot h4, .foot h5 { color: var(--text-tertiary) !important; }

/* ── Consent banner (consent.js paints inline light styles) ───────────── */
#lsc-banner {
  background: #14171b !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-panel) !important;
}
#lsc-banner p, #lsc-banner span { color: var(--text-secondary) !important; }
#lsc-banner a { color: var(--brand-red) !important; }
#lsc-accept { background: var(--cta-fill) !important; }
#lsc-decline { background: transparent !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }

/* ── Misc leftovers from the older sheets ─────────────────────────────── */
.approve-card .ed, .ac-cancel, .quiet-list span, .video-cta {
  background: var(--control-fill) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.grad { -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; background: none !important; }
::selection { background: rgba(198,255,52,.28); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--ring) !important; }

/* ============================================================================
   style.css still carries the older "v3 bright" token set (indigo/violet on
   near-white). Retarget those variables too, so every page built on that
   sheet inherits the dark theme instead of being patched selector by selector.
   ========================================================================== */
:root {
  --bg:           #0a0b0d !important;
  --bg-white:     #14171b !important;
  --band-indigo:  #101215 !important;
  --band-green:   #101215 !important;
  --ink:          #f3f5f7 !important;
  --ink-2:        #c3cad1 !important;
  --ink-3:        #8b949e !important;
  --line:         rgba(255,255,255,.09) !important;
  --violet:       #a9e400 !important;
  --grad:         linear-gradient(135deg,#c6ff34 0%,#a9e400 100%) !important;
  --green:        #a9e400 !important;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4) !important;
  --shadow-md:    0 10px 30px -18px rgba(0,0,0,.8) !important;
  --shadow-lg:    0 24px 60px -30px rgba(0,0,0,.85) !important;
}

/* Hero glow: purple -> brand green */
.hero::before, .page-hero::before {
  background: radial-gradient(circle, rgba(198,255,52,.13), rgba(198,255,52,.05) 40%, transparent 70%) !important;
}

/* Anything filled with the (now green) gradient or accent needs a dark label */
.step .num, .dm-approve, .ac-go, .button.primary, .video-play,
.app-card-glyph, .eyebrow .dot, .ex-badge .dot {
  color: var(--cta-text) !important;
  box-shadow: none !important;
}
.button.primary { border-color: var(--cta-fill) !important; background: var(--cta-fill) !important; }
.button.primary:hover { background: var(--cta-fill-hover) !important; box-shadow: 0 12px 30px -14px rgba(198,255,52,.5) !important; }
.eyebrow .dot, .ex-badge .dot { background: var(--brand-red) !important; }

/* Nav: 6 links naturally filled the column right up to the centred logo */
.nav-links { gap: 20px !important; }
.nav-links a { font-size: 14px !important; }
.nav .logo { margin-inline: 18px !important; }

/* Legacy light-on-light chips that lost contrast on dark */
.ex-eyebrow, .eyebrow { background: transparent !important; border-color: var(--border) !important; }

/* compat.css .button (used across the 129 integration pages) hardcodes a
   white fill — with light ink that became white-on-white. */
.button, .button.dark, .button.ghost {
  background: var(--control-fill) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.button:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-md) !important; }
.button.primary, .button.primary:hover { color: var(--cta-text) !important; border-color: var(--cta-fill) !important; }
.skip-link { background: var(--cta-fill) !important; color: var(--cta-text) !important; }

/* Legacy brand fills hardcoded in page styles (indigo #4F46E5, brick #bf4d3d)
   that the token retheme can't reach — pull them onto the green accent. */
.q-btn-ok, .q-mock-head, .q-post-meta span, .q-step b, .aff-step b, .aff-badge {
  background: var(--cta-fill) !important;
  color: var(--cta-text) !important;
  border-color: var(--cta-fill) !important;
}
.video-cta, .landing-visual-card { background: var(--surface-strong) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }

/* ── Inline-styled accent fills (29 pages) ────────────────────────────────
   Several pages set the accent as an inline background with a hardcoded
   color:#fff. That was white-on-brick-red; now it's white-on-green (~1.3:1
   and unreadable). Match only the *background* declaration so elements that
   merely use the accent as a text colour are left alone. */
[style*="background:var(--brand-red)"],
[style*="background: var(--brand-red)"],
[style*="background:var(--primary-fill)"],
[style*="background: var(--primary-fill)"],
[style*="background:var(--highlight)"],
[style*="background: var(--highlight)"],
[style*="background:var(--accent)"],
[style*="background: var(--accent)"],
[style*="background:var(--cta-fill)"],
[style*="background: var(--cta-fill)"],
[style*="background:var(--grad)"],
[style*="background: var(--grad)"] { color: var(--cta-text) !important; }

[style*="background:var(--brand-red)"] *,
[style*="background: var(--brand-red)"] *,
[style*="background:var(--primary-fill)"] *,
[style*="background: var(--primary-fill)"] *,
[style*="background:var(--highlight)"] *,
[style*="background: var(--highlight)"] *,
[style*="background:var(--accent)"] *,
[style*="background: var(--accent)"] *,
[style*="background:var(--cta-fill)"] *,
[style*="background: var(--cta-fill)"] *,
[style*="background:var(--grad)"] *,
[style*="background: var(--grad)"] * { color: var(--cta-text) !important; fill: currentColor; }