/* =====================================================================
   LIGHT THEME — original rose identity, with a proper colour hierarchy
   ---------------------------------------------------------------------
   Problem fixed: page, sections, cards and inner elements were all the
   same near-white pink (#fff5f7 / #fff0f4), so nothing separated.
   Brand tokens (--main #e11d48, ink #3a0a18) are NOT changed here.
   Load LAST (after why-hire-redesign.css). Light theme only.

   Four tonal layers, each clearly different from the one under it:
     L0  page + sections   deeper blush     #f8dce5 … #fce9ee
     L1  cards / panels    soft white-rose  #fff8fa  + rose edge + shadow
     L2  chips, tags, icon wells, inputs    #fde0e8  + stronger edge
     L3  accents (buttons, active, markers) solid rose #e11d48, white text
   Glow only on L3 and on hover/focus of L1.
   ===================================================================== */
:root[data-theme="light"] {
  --lt-page:    #fbe6ec;
  --lt-home:    #fce9ee;
  --lt-about:   #f9dfe7;
  --lt-stats:   #fbe3ea;
  --lt-skills:  #f8dce5;
  --lt-project: #fae1e8;
  --lt-why:     #f7dae3;
  --lt-service: #f9dfe6;
  --lt-contact: #f6d5df;

  --lt-card:        #fff8fa;                 /* L1 */
  --lt-card-hover:  #ffffff;
  --lt-edge:        rgba(225, 29, 72, 0.22);
  --lt-edge-hi:     rgba(225, 29, 72, 0.45);
  --lt-chip:        #fde0e8;                 /* L2 */
  --lt-chip-edge:   rgba(225, 29, 72, 0.30);
  --lt-matte-shadow: 0 14px 32px -16px rgba(122, 12, 46, 0.28);
  --lt-glow:        0 0 26px -6px rgba(255, 77, 109, 0.50);
  --lt-glow-soft:   0 0 16px -4px rgba(255, 77, 109, 0.40);

  --page-bg: var(--lt-page);
  background: var(--lt-page) !important;
  background-color: var(--lt-page) !important;
}
:root[data-theme="light"] body,
:root[data-theme="light"] #real-site,
:root[data-theme="light"] #page-loader {
  background: var(--lt-page) !important;
  background-color: var(--lt-page) !important;
  background-image: none !important;
}

/* ---------- L0: sections (flat tint + one faint rose bloom) ---------- */
:root[data-theme="light"] .home {
  background-color: var(--lt-home) !important;
  background-image: radial-gradient(ellipse 55% 50% at 88% 12%, rgba(255, 77, 109, 0.12), transparent 70%) !important;
}
:root[data-theme="light"] .about {
  --ab-grid: rgba(225, 29, 72, 0.10);
  background-color: var(--lt-about) !important;
  background-image: radial-gradient(ellipse 55% 50% at 10% 10%, rgba(255, 77, 109, 0.10), transparent 70%) !important;
}
:root[data-theme="light"] .stats-section,
:root[data-theme="light"] .scroll-video-section {
  background-color: var(--lt-stats) !important;
  background-image: none !important;
}
:root[data-theme="light"] #skills {
  background-color: var(--lt-skills) !important;
  background-image: radial-gradient(ellipse 55% 50% at 90% 90%, rgba(255, 77, 109, 0.10), transparent 70%) !important;
}
:root[data-theme="light"] section#timeline.timeline-section {
  background:
    radial-gradient(ellipse 60% 45% at 85% 8%, rgba(255, 77, 109, 0.12), transparent 70%),
    linear-gradient(180deg, #f9e3ea 0%, #f6d9e2 55%, #f3cfda 100%) !important;
}
:root[data-theme="light"] #project {
  background-color: var(--lt-project) !important;
  background-image: radial-gradient(ellipse 55% 45% at 10% 95%, rgba(255, 77, 109, 0.10), transparent 70%) !important;
}
:root[data-theme="light"] .why-hire-section {
  background-color: var(--lt-why) !important;
  background-image: none !important;
}
:root[data-theme="light"] .services,
:root[data-theme="light"] #service.services,
:root[data-theme="light"] section#service.services {
  background-color: var(--lt-service) !important;
  background-image: radial-gradient(ellipse 55% 45% at 85% 5%, rgba(255, 77, 109, 0.10), transparent 70%) !important;
}
:root[data-theme="light"] #service {
  --svc-bg: #f9dfe6;
  --svc-bg-2: #f5d2dc;
  --svc-haze: #efc0ce;
  --svc-rose-under: #e8a9bb;
  --wave-shadow: #e099b0;
}
:root[data-theme="light"] #contact {
  background-color: var(--lt-contact) !important;
  background-image: radial-gradient(ellipse 55% 50% at 14% 20%, rgba(255, 77, 109, 0.14), transparent 70%) !important;
}

/* ---------- L1: cards — lighter than the section, defined edge ---------- */
:root[data-theme="light"] #project .project-card,
:root[data-theme="light"] #skills .skill-category,
:root[data-theme="light"] #skills .tech-panel,
:root[data-theme="light"] .why-hire-grid .why-hire-card,
:root[data-theme="light"] .why-hire-grid .why-hire-card:hover,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] #service .signal-entry,
:root[data-theme="light"] .contact-form,
:root[data-theme="light"] .contact-form-wrapper,
:root[data-theme="light"] .timeline-content,
:root[data-theme="light"] .stat-item,
:root[data-theme="light"] .about-orbit-zone,
:root[data-theme="light"] .scroll-skills-card,
:root[data-theme="light"] #scrollSkillsLeft,
:root[data-theme="light"] #scrollSkillsRight {
  background-color: var(--lt-card) !important;
  background-image: none !important;
  border: 1px solid var(--lt-edge) !important;
  box-shadow: var(--lt-matte-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .why-hire-grid .why-hire-card::before,
:root[data-theme="light"] #project .project-card::after { display: none; }

/* ---------- L2: inner elements — clearly darker than their card ---------- */
:root[data-theme="light"] .skill-tag,
:root[data-theme="light"] #skills .tech-icon,
:root[data-theme="light"] #project .project-card .skills a,
:root[data-theme="light"] #service .signal-tags span,
:root[data-theme="light"] .why-hire-grid .wh-icon,
:root[data-theme="light"] .orbit-tag,
:root[data-theme="light"] .id-social,
:root[data-theme="light"] .contact-form input,
:root[data-theme="light"] .contact-form textarea {
  background-color: var(--lt-chip) !important;
  background-image: none !important;
  border: 1px solid var(--lt-chip-edge) !important;
  color: var(--ink) !important;
}
:root[data-theme="light"] .contact-form input:focus,
:root[data-theme="light"] .contact-form textarea:focus {
  border-color: var(--main) !important;
  box-shadow: var(--lt-glow-soft) !important;
  outline: none;
}
:root[data-theme="light"] .contact-form ::placeholder { color: var(--ink-faint); }

/* ---------- Glow: hover / focus on cards ---------- */
:root[data-theme="light"] #project .project-card:hover,
:root[data-theme="light"] #project .project-card.is-focused,
:root[data-theme="light"] #skills .skill-category:hover,
:root[data-theme="light"] #skills .tech-panel:hover,
:root[data-theme="light"] .why-hire-grid .why-hire-card:hover,
:root[data-theme="light"] .service-card:hover,
:root[data-theme="light"] .timeline-content:hover,
:root[data-theme="light"] #service .signal-entry:hover,
:root[data-theme="light"] .contact-form:focus-within {
  background-color: var(--lt-card-hover) !important;
  border-color: var(--lt-edge-hi) !important;
  box-shadow: var(--lt-matte-shadow), var(--lt-glow) !important;
}
:root[data-theme="light"] #service .signal-entry.is-active {
  background-color: #ffffff !important;
  border-color: var(--lt-edge-hi) !important;
  box-shadow: var(--lt-matte-shadow), var(--lt-glow-soft) !important;
}

/* ---------- L3: accents — solid rose, white text, glow ---------- */
:root[data-theme="light"] .btn-hero-primary,
:root[data-theme="light"] #contact-submit-btn {
  background: var(--main) !important;
  box-shadow: 0 8px 22px -8px rgba(225, 29, 72, 0.55), var(--lt-glow-soft) !important;
}
:root[data-theme="light"] .btn-hero-primary:hover,
:root[data-theme="light"] #contact-submit-btn:hover {
  background: var(--main-dark) !important;
  box-shadow: 0 10px 26px -8px rgba(225, 29, 72, 0.65), var(--lt-glow) !important;
}
:root[data-theme="light"] .service-icon,
:root[data-theme="light"] .about-orbit-zone .orbit-item.is-on,
:root[data-theme="light"] .ul-list li.active {
  box-shadow: var(--lt-glow-soft) !important;
}
:root[data-theme="light"] .jt-m.is-active .jt-m-core { filter: drop-shadow(0 0 4px rgba(255, 77, 109, 0.85)); }
:root[data-theme="light"] .jt-active { filter: drop-shadow(0 0 3px rgba(255, 77, 109, 0.6)); }

/* ---------- Navigation + controls (L1-level, edge visible) ---------- */
:root[data-theme="light"] .ul-list,
:root[data-theme="light"] header.is-scrolled .ul-list {
  background: rgba(255, 248, 250, 0.88);
  border: 1px solid var(--lt-edge);
  box-shadow: var(--lt-matte-shadow);
}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] #langSwitcher,
:root[data-theme="light"] .lang-menu {
  background-color: var(--lt-card) !important;
  border: 1px solid var(--lt-edge) !important;
}

/* Mobile block in style.css pins cards to one flat #fff0f4 — keep the layers */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  :root[data-theme="light"] .project-card,
  :root[data-theme="light"] .service-card,
  :root[data-theme="light"] .why-hire-card,
  :root[data-theme="light"] #skills .skill-category,
  :root[data-theme="light"] .contact-form,
  :root[data-theme="light"] .contact-form-wrapper,
  :root[data-theme="light"] .timeline-content,
  :root[data-theme="light"] .stat-item,
  :root[data-theme="light"] .about-orbit-zone {
    background-color: var(--lt-card) !important;
    background-image: none !important;
  }
}

:root[data-theme="light"] ::selection { background: rgba(225, 29, 72, 0.25); color: var(--ink); }