/*
 * VoiceSilo - Light skin (white + grey variant)
 * Scoped entirely under body.skin-light so the dark homepage is untouched.
 * Redefines the design tokens and overrides the few hardcoded dark colors.
 */

body.skin-light {
  --bg-deep: #FFFFFF;
  --bg-darker: #F1F5F9;
  --bg-panel: #F8FAFC;
  --slate: #475569;
  --slate-dim: #64748B;
  --ink: #0A192F;
  --ink-soft: #334155;
  --glass-bg: #FFFFFF;
  --glass-bg-strong: #FFFFFF;
  --glass-border: rgba(15, 23, 42, 0.09);
  --glass-border-lit: rgba(20, 184, 166, 0.5);
  --shadow-card: 0 20px 44px -26px rgba(15, 23, 42, 0.28);
  --teal-glow: rgba(20, 184, 166, 0.3);
  background: #FFFFFF;
  color: #334155;
}

/* ---- Accent text gets a deeper teal for contrast on white ---- */
body.skin-light .eyebrow,
body.skin-light .kicker { color: var(--teal-deep); }
body.skin-light .badge { color: var(--teal-deep); }

/* ---- White / grey section rhythm ---- */
body.skin-light .trust { background: #F8FAFC; border-top-color: rgba(15,23,42,0.07); border-bottom-color: rgba(15,23,42,0.07); }
body.skin-light #services { background: #FFFFFF; }
body.skin-light #security { background: #F4F7FB; }
body.skin-light #about { background: #FFFFFF; }
body.skin-light #partner { background: #FFFFFF; }
body.skin-light #developer { background: #FFFFFF; }
body.skin-light #faq { background: #F4F7FB; }

/* ---- Header ---- */
body.skin-light .site-header { background: rgba(255, 255, 255, 0.82); border-bottom-color: rgba(15, 23, 42, 0.07); }
body.skin-light .site-header.scrolled { background: #FFFFFF; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.22); }
body.skin-light .nav-links a { color: var(--slate); }
body.skin-light .nav-links a:hover { color: var(--ink); }

/* ---- Hero ---- */
body.skin-light .hero-meta b { color: var(--ink); }
body.skin-light .float-chip {
  background: #FFFFFF;
  color: var(--ink);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.3);
}
/* The hero visual stays a dark "screen" card on purpose for contrast. */

/* ---- Step cards ---- */
body.skin-light .step-num { color: rgba(15, 23, 42, 0.07); }

/* ---- Comparison matrix ---- */
body.skin-light .matrix th,
body.skin-light .matrix td { border-bottom-color: rgba(15, 23, 42, 0.07); }
body.skin-light .matrix tbody tr:hover { background: rgba(15, 23, 42, 0.02); }
body.skin-light .matrix .col-silo {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.03));
  color: var(--teal-deep);
}

/* ---- Final CTA + Trusted Partner panels: kept dark navy for premium contrast ---- */
body.skin-light .final h2 { color: #F1F5F9; }
body.skin-light .final p { color: #94A3B8; }
body.skin-light .final .eyebrow { color: var(--teal-bright); }
body.skin-light .final .btn-ghost { color: #F1F5F9; border-color: rgba(148, 163, 184, 0.25); }
body.skin-light .final .btn-ghost:hover { background: rgba(20, 184, 166, 0.12); border-color: var(--glass-border-lit); }

/* ---- Footer ---- */
body.skin-light .site-footer { background: #F8FAFC; border-top-color: rgba(15, 23, 42, 0.08); }
body.skin-light .foot-bottom { border-top-color: rgba(15, 23, 42, 0.08); }
body.skin-light .foot-social a { border-color: rgba(15, 23, 42, 0.08); }
body.skin-light .footer-links a:hover { color: var(--teal-deep); }