/* ==========================================================================
   Xpress AI Co-Worker™ — Alternating section themes
   Sections alternate .theme-dark (deep space) and .theme-light (cream).
   Inside a light section, the dark-theme utilities used across the site are
   remapped to charcoal-on-white so existing markup works unchanged.
   Anything that must stay dark inside a light section (phones, robot pods,
   feature bands) carries .dark-island (pods are treated as islands too).
   Green is reserved for live status, success and checkmarks.
   ========================================================================== */

:root {
  --cream: #f8f6f0;
  --cream-50: #fbf9f5;
  --ink: #090d16;
  --space: #05080e;
  --brand-gradient: linear-gradient(110deg, #ef401d 0%, #f66f48 55%, #ffb18f 100%);
  --success: #10b981;
  --success-strong: #059669;
}

/* ---------- section shells ---------- */
.theme-dark { background-color: var(--ink); color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.theme-light { background-color: var(--cream); color: #334155; border-top: 1px solid rgba(203, 213, 225, 0.6); }

/* elements inside a light section that keep the dark look */
/* (selector helper used below: :not(:where(.dark-island, .dark-island *, .pod, .pod *))) */

/* ---------- text ---------- */
/* dark sections: white headings always stay pure white */
.theme-dark :is(h1, h2, h3, h4, p).text-white:not(:where(.theme-light *)) { color: #ffffff !important; }
/* dark sections: lift the dimmest labels (slider ticks, captions) to AA contrast */
.theme-dark .text-slate-600:not(:where(.dark-island *)) { color: #8391a7; }
.dark-island .text-slate-700 { color: #8391a7; }

.theme-light .text-white:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #0f172a; }
.theme-light :is(.text-slate-100, .text-slate-200):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #1e293b; }
.theme-light .text-slate-300:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #334155; }
.theme-light :is(.text-slate-400, .text-slate-500):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #475569; }
.theme-light :is(.text-brand-200, .text-brand-300, .text-brand-400):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #b8300d; }
.theme-light .tint-text:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: color-mix(in srgb, var(--c) 55%, #000); }
/* light-tinted accent text → its deeper, readable shade */
.theme-light :is(.text-sky-300, .text-accent-blue):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #0369a1; }
.theme-light :is(.text-amber-300, .text-amber-400):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #b45309; }
.theme-light :is(.text-pink-300, .text-accent-pink):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #be185d; }
.theme-light :is(.text-purple-300, .text-accent-purple):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #7e22ce; }
.theme-light .text-orange-300:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #c2410c; }
.theme-light .text-cyan-300:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #0e7490; }
.theme-light :is(.text-rose-300, .text-rose-400):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #be123c; }
.theme-light :is(.text-emerald-300, .text-emerald-400):not(:where(.dark-island, .dark-island *, .pod, .pod *)) { color: #047857; }

.theme-light .text-gradient:not(:where(.dark-island, .dark-island *)) {
  background: linear-gradient(110deg, #c2290b 0%, #ef401d 55%, #f0592f 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
.theme-light .eyebrow:not(:where(.dark-island, .dark-island *)) { color: #b8300d; background: rgba(239, 64, 29, 0.08); border-color: rgba(239, 64, 29, 0.3); }

/* ---------- surfaces ---------- */
.theme-light :is(.glass, .glass-card, .faq-glass, .cw-tool, .stat-tile, .cw-mate):not(:where(.dark-island, .dark-island *)) {
  background: #ffffff;
  border-color: rgba(226, 232, 240, 0.9);
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.18);
}
.theme-light :is([class*="bg-ink-"], [class*="bg-white/"], [class*="bg-[#0f172a]"], [class*="bg-slate-9"]):not(:where(.dark-island, .dark-island *, .pod, .pod *, .live-dot)) {
  background-color: #ffffff;
}
.theme-light [class*="border-white/"]:not(:where(.dark-island, .dark-island *, .pod, .pod *)) { border-color: #e2e8f0; }
.theme-light .divide-white\/\[0\.04\] > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }
.theme-light .orb { opacity: 0.55; }
.theme-light .faq-glass.open { box-shadow: 0 18px 40px -26px rgba(239, 64, 29, 0.35), inset 3px 0 0 #ef401d; }

/* buttons */
.theme-light .btn-ghost:not(:where(.dark-island, .dark-island *)) { color: #0f172a; background: #ffffff; border-color: #e2e8f0; box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.25); }
.theme-light .btn-ghost:not(:where(.dark-island, .dark-island *)):hover { border-color: #f66f48; color: #b8300d; }

/* Co-Worker profile: how-it-works rail and step badges on cream */
.theme-light .cw-rail { background: #e2e8f0; }
.theme-light .cw-step-num { background: #ffffff; color: #0f172a; box-shadow: 0 0 0 6px var(--cream); }
.theme-light .cw-step:first-child .cw-step-num { background: var(--brand-gradient); color: #1c0701; }

/* subtle light-section textures */
.theme-light .bg-grid, .theme-light .bg-dots { opacity: 0.25; filter: invert(1); }

/* ---------- green: live status, success, checkmarks ---------- */
.live-dot { background: var(--success); }
i:is(.fa-circle-check, .fa-check, .fa-check-double):not(.tint-text):not(:where(.btn-primary *, .cw-act *, .text-sky-300)) { color: var(--success); }
.theme-light i:is(.fa-circle-check, .fa-check, .fa-check-double):not(.tint-text):not(:where(.btn-primary *, .cw-act *, .dark-island *)) { color: var(--success-strong); }