/* ==========================================================================
   TECEZE — Light theme (design tokens + shared component treatment)
   Scoped entirely to `body.theme-light`. Both index.html (public Overview)
   and admin.html (internal dashboard) carry this class, so they share one
   light color system, card style, button style and hero visual treatment.
   admin.css layers a small number of admin-only rules on top of this for
   the login screen and dashboard table, but the palette below is shared.
   ========================================================================== */

body.theme-light {
  --bg: #f4f7fb;
  --bg-1: #eef3fa;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --panel-3: #f1f5fb;
  --border: rgba(15, 23, 42, .08);
  --border-strong: rgba(37, 99, 235, .22);
  --accent: #2563eb;
  --accent-2: #2f6fed;
  --accent-dim: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, .16);
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --line: rgba(15, 23, 42, .08);
  --shadow: 0 24px 50px rgba(15, 23, 42, .10);
  color-scheme: light;
}

/* ---------- Sidebar ---------- */
body.theme-light .app-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
}
body.theme-light .sidebar-brand { border-bottom: 1px solid var(--border); }
body.theme-light .sidebar-nav-item:hover { background: var(--panel-3); }
body.theme-light .sidebar-nav-item.active {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
}
body.theme-light .sidebar-security {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
body.theme-light .sidebar-footer { border-top: 1px solid var(--border); }

/* ---------- Header ---------- */
body.theme-light .site-header {
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--border);
}
body.theme-light .secure-pill {
  background: rgba(37, 99, 235, .08);
  color: var(--accent-dim);
}

/* ---------- Hero section ---------- */
body.theme-light .hero {
  background: radial-gradient(circle at 84% 6%, rgba(37, 99, 235, .08), transparent 42%), var(--bg);
}
body.theme-light .eyebrow-rule { background: linear-gradient(90deg, var(--border-strong), transparent); }
body.theme-light .hero-proof { border-top: 1px solid var(--border); }
body.theme-light .how-it-works-link .play-dot { border-color: var(--border-strong); }

/* Hero visual: two-column grid (copy | media card), matching the reference's
   side-by-side layout. The hero image itself is the reference IT vending
   machine photo with its four readiness cards (Automation, Technology,
   Operations, People) baked in, so the media card is locked to the image's
   own aspect ratio (rather than a fixed height) so `object-fit: cover` never
   has to crop into any of the four corner cards. */
@media (min-width: 981px) {
  body.theme-light .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
  }
  body.theme-light .hero-copy { max-width: none; }
  body.theme-light .hero-media {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: 100%; min-width: 0;
    height: auto;
  }
}

body.theme-light .hero-media {
  border-radius: 26px;
  overflow: hidden;
  background: #eef3fa;
  box-shadow: 0 30px 60px rgba(15, 23, 42, .16), 0 2px 0 rgba(15, 23, 42, .02);
  aspect-ratio: 703 / 578;
}
body.theme-light .hero-scene { height: auto; aspect-ratio: 703 / 578; }
body.theme-light .hero-media-img {
  -webkit-mask-image: none;
  mask-image: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The four readiness cards are part of the photo now, so the animated glow
   sweep, rising particles and slow zoom drift (tuned for the old dark
   full-bleed render) are switched off for a clean, static enterprise photo
   matching the reference. */
body.theme-light .hero-scene-glow,
body.theme-light .hero-scene-particles { display: none; }
body.theme-light .hero-scene .hero-media-img { animation: none; }

/* ---------- Feature / trust cards: individual white cards, not a divided row ---------- */
body.theme-light .trust-row { background: transparent; border: 0; margin-top: 28px; }
body.theme-light .trust-grid { gap: 18px; }
body.theme-light .trust-item {
  border-left: 0; border-top: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
body.theme-light .trust-icon {
  background: rgba(37, 99, 235, .1);
  border: 0;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
body.theme-light .btn-primary {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}
body.theme-light .btn-primary:hover { box-shadow: 0 16px 30px rgba(37, 99, 235, .28); }
body.theme-light .btn-secondary {
  color: var(--text-soft);
  border-color: var(--border);
  background: #fff;
}
body.theme-light .btn-secondary:hover { background: var(--panel-3); }
body.theme-light .btn-light {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
}
body.theme-light .btn-outline-light {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--border-strong);
}
body.theme-light .btn-outline-light:hover { background: var(--panel-3); }

/* ---------- Sections / general surfaces ---------- */
body.theme-light .mode-section { background: var(--bg-1); }
body.theme-light .product-card,
body.theme-light .mode-card,
body.theme-light .card,
body.theme-light .form-section,
body.theme-light .question-card,
body.theme-light .fit-card,
body.theme-light .priority-card,
body.theme-light .dimension-nav,
body.theme-light .contact-form {
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}
body.theme-light .product-card img { filter: none; }

/* Chips / badges that used pale-blue text tuned for a dark background —
   swap to solid navy on light-blue so they stay readable. */
body.theme-light .mode-card .mode-tag,
body.theme-light .dimension-nav li.current button,
body.theme-light .status-badge {
  background: rgba(37, 99, 235, .1);
  color: var(--accent-dim);
}
body.theme-light .scale-button.selected {
  background: rgba(37, 99, 235, .1);
  color: var(--accent-dim);
}

body.theme-light .assessment-topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
}

/* Result hero: keep it light and consistent with the rest of the page
   rather than the previous dark-on-transparent treatment. */
body.theme-light .result-hero { color: var(--text); }
body.theme-light .result-hero p { color: var(--muted); }

/* Pilot / next-step CTA: an intentional solid-blue accent block (a common
   enterprise pattern — one high-contrast panel on an otherwise light page). */
body.theme-light .pilot-card {
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  border-color: transparent;
  box-shadow: 0 24px 50px rgba(37, 99, 235, .22);
}
body.theme-light .pilot-measures { border-left-color: rgba(255, 255, 255, .22); }
body.theme-light .pilot-card .eyebrow.light { color: rgba(255, 255, 255, .78); }
body.theme-light .pilot-card h2 { color: #fff; }

body.theme-light .contact-section { background: var(--bg-1); }

@media (max-width: 980px) {
  body.theme-light .hero-media-img { mask-image: none; -webkit-mask-image: none; }
  body.theme-light .hero-media { height: auto; aspect-ratio: 703 / 578; }
  body.theme-light .assessment-actions { background: rgba(255, 255, 255, .96); }
}