/* ============================================================
   AINODE.TECH — LIGHT MODE
   "Tech Boutique" aesthetic: Clean, product-focused
   White backgrounds, products breathe, gradient accents

   Activated via data-theme="light" on body
   ============================================================ */

/* ============================================================
   LIGHT MODE VARIABLES
   Soft, warm background with purple/teal tint — not harsh white
   Note: Color theme variables (--purple, --teal, --accent, --gradient-brand)
   are set by debug-theme.js and apply to both light and dark modes
   ============================================================ */
body[data-theme="light"] {
  /* Soft backgrounds with subtle warmth */
  --light-bg: #f4f4f7;           /* Soft grayish-lavender, not pure white */
  --light-bg-alt: #ecedf2;       /* Slightly darker for contrast */
  --light-text: #1e1b4b;         /* Deep indigo for text */
  --light-text-muted: #6366a0;   /* Muted purple-gray */
  --light-border: #d8d9e4;
  --light-card-bg: #fafafc;

  /* Swap black/white semantics for light mode */
  --black: var(--light-bg);
  --black-alt: var(--light-bg-alt);
  --white: var(--light-text);
  --gray: #e8e9f0;
  --text-muted: var(--light-text-muted);

  /* Status colors adjusted for light mode */
  --green: #059669;
  --red: #dc2626;
}

/* ============================================================
   BODY & BASE
   ============================================================ */
body[data-theme="light"] {
  background: #f4f4f7;
  color: #1e1b4b;
}

/* ============================================================
   TICKER — Styled by debug-theme.js for proper theme support
   Falls back to dark for contrast if no JS override
   ============================================================ */
body[data-theme="light"] .ticker {
  /* Default fallback - JS will override with theme colors */
  background: #0f172a;
  color: var(--teal, #14b8a6);
  border-bottom-color: #e2e8f0;
}

/* ============================================================
   NAVBAR
   ============================================================ */
body[data-theme="light"] .navbar {
  background: #f4f4f7;
  border-bottom: 2px solid #d8d9e4;
}

body[data-theme="light"] .navbar.scrolled {
  border-bottom-color: #1e1b4b;
  box-shadow: 0 4px 20px rgba(30, 27, 75, 0.1);
}

body[data-theme="light"] .nav-links a {
  color: #3a386b;
}

body[data-theme="light"] .nav-links a:hover {
  color: var(--accent, #7c3aed);
}

body[data-theme="light"] .nav-links a::after {
  background: var(--gradient-brand);
}

body[data-theme="light"] .nav-lang-toggle {
  background: #1e1b4b;
  color: #f4f4f7;
  border-color: #1e1b4b;
}

body[data-theme="light"] .nav-lang-toggle:hover {
  background: #f4f4f7;
  color: #1e1b4b;
}

body[data-theme="light"] .hamburger span {
  background: #1e1b4b;
}

body[data-theme="light"] .mobile-menu {
  background: #f4f4f7;
}

body[data-theme="light"] .mobile-menu a,
body[data-theme="light"] .mobile-menu .mobile-lang {
  color: #1e1b4b;
}

/* ============================================================
   HERO ANIMATION — Light version
   ============================================================ */
body[data-theme="light"] .hero-animation {
  background: transparent;
}

body[data-theme="light"] .hero-animation::after {
  background: linear-gradient(to top, #f4f4f7 0%, transparent 100%);
}

body[data-theme="light"] .hero-animation::before {
  background: linear-gradient(to bottom, #f4f4f7 0%, transparent 100%);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
body[data-theme="light"] .hero {
  background: #f4f4f7;
}

body[data-theme="light"] .hero.hero-split {
  background: #f4f4f7;
}

body[data-theme="light"] .hero-top,
body[data-theme="light"] .hero-bottom {
  background: transparent;
}

body[data-theme="light"] .hero::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 99px,
    rgba(0, 0, 0, 0.02) 99px,
    rgba(0, 0, 0, 0.02) 100px
  );
}

body[data-theme="light"] .hero-title {
  color: #1e1b4b;
}

body[data-theme="light"] .hero-subtitle {
  color: #4c4a7a;
}

body[data-theme="light"] .btn {
  border-color: #1e1b4b;
}

body[data-theme="light"] .btn-primary {
  background: #1e1b4b;
  color: #f4f4f7;
}

body[data-theme="light"] .btn-primary:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
body[data-theme="light"] .section-divider {
  background: #d8d9e4;
}

/* ============================================================
   SECTIONS
   ============================================================ */
body[data-theme="light"] .section {
  background: #f4f4f7;
}

body[data-theme="light"] .section:nth-of-type(even) {
  background: #ecedf2;
}

body[data-theme="light"] .section-title {
  color: #1e1b4b;
}

body[data-theme="light"] .section-subtitle {
  color: #6366a0;
}

/* ============================================================
   PRODUCT CARDS — The Star of Light Mode
   Products finally breathe!
   ============================================================ */
body[data-theme="light"] .product-card {
  background: #fafafc;
  border: 2px solid #d8d9e4;
  box-shadow: 0 4px 20px rgba(30, 27, 75, 0.06);
}

body[data-theme="light"] .product-card:hover {
  background: #fafafc;
  border-color: #1e1b4b;
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 var(--accent-secondary, #7c3aed);
}

body[data-theme="light"] .product-image {
  background: #ecedf2;
  border-bottom-color: #d8d9e4;
}

body[data-theme="light"] .product-card:hover .product-image {
  border-bottom-color: #1e1b4b;
}

body[data-theme="light"] .product-name {
  color: #1e1b4b;
}

body[data-theme="light"] .product-card:hover .product-name {
  color: #1e1b4b;
}

body[data-theme="light"] .product-brand {
  color: #8486b5;
}

body[data-theme="light"] .product-card:hover .product-brand {
  color: #6366a0;
}

body[data-theme="light"] .product-description {
  color: #4c4a7a;
}

body[data-theme="light"] .product-card:hover .product-description {
  color: #3a386b;
}

body[data-theme="light"] .product-price {
  color: #1e1b4b;
}

body[data-theme="light"] .product-card:hover .product-price {
  color: #1e1b4b;
}

body[data-theme="light"] .product-footer {
  border-top-color: #d8d9e4;
}

body[data-theme="light"] .product-card:hover .product-footer {
  border-top-color: rgba(30, 27, 75, 0.15);
}

/* Audit badges stay vibrant */
body[data-theme="light"] .audit-badge {
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .audit-badge.badge-pass {
  background: #059669;
  color: #ffffff;
}

body[data-theme="light"] .audit-badge.badge-fail {
  background: #dc2626;
}

body[data-theme="light"] .audit-badge.badge-pending {
  background: #94a3b8;
  color: #ffffff;
  border-color: #ffffff;
}

/* Product buttons */
body[data-theme="light"] .btn-audit-detail,
body[data-theme="light"] .btn-buy {
  border-color: #1e1b4b;
  color: #1e1b4b;
}

body[data-theme="light"] .btn-audit-detail:hover,
body[data-theme="light"] .btn-buy:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

body[data-theme="light"] .product-card:hover .btn-audit-detail,
body[data-theme="light"] .product-card:hover .btn-buy {
  border-color: #1e1b4b;
  color: #1e1b4b;
}

body[data-theme="light"] .product-unavailable {
  color: #8486b5;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
body[data-theme="light"] .feature-card {
  background: #fafafc;
  border-color: #d8d9e4;
}

body[data-theme="light"] .feature-card:hover {
  background: #1e1b4b;
  border-color: #1e1b4b;
  box-shadow: 6px 6px 0 var(--accent, #14b8a6);
}

body[data-theme="light"] .feature-card h4 {
  color: #1e1b4b;
}

body[data-theme="light"] .feature-card p {
  color: #4c4a7a;
}

body[data-theme="light"] .feature-card:hover h4,
body[data-theme="light"] .feature-card:hover p {
  color: #f4f4f7;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
body[data-theme="light"] .about-main h3 {
  color: #1e1b4b;
}

body[data-theme="light"] .about-main p {
  color: #4c4a7a;
}

/* ============================================================
   CONTACT CARDS
   ============================================================ */
body[data-theme="light"] .contact-card {
  background: #fafafc;
  border-color: #d8d9e4;
}

body[data-theme="light"] .contact-card:hover {
  background: #1e1b4b;
  border-color: #1e1b4b;
  box-shadow: 6px 6px 0 var(--accent, #14b8a6);
}

body[data-theme="light"] .contact-card h4 {
  color: #1e1b4b;
}

body[data-theme="light"] .contact-card p {
  color: #4c4a7a;
}

body[data-theme="light"] .contact-card:hover h4,
body[data-theme="light"] .contact-card:hover p {
  color: #f4f4f7;
}

body[data-theme="light"] .btn-contact {
  border-color: #1e1b4b;
  color: #1e1b4b;
}

body[data-theme="light"] .btn-contact:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

body[data-theme="light"] .contact-card:hover .btn-contact {
  border-color: #f4f4f7;
  color: #f4f4f7;
}

/* ============================================================
   FOOTER — Stays dark for anchor
   ============================================================ */
body[data-theme="light"] .footer {
  background: #0f172a;
  border-top: 3px solid #0f172a;
}

body[data-theme="light"] .footer-brand p {
  color: rgba(255, 255, 255, 0.7);
}

body[data-theme="light"] .footer-links a {
  color: rgba(255, 255, 255, 0.8);
}

body[data-theme="light"] .footer-links a:hover {
  color: var(--accent, #14b8a6);
}

body[data-theme="light"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

body[data-theme="light"] .footer .nav-logo {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   AUDIT OVERLAY
   ============================================================ */
body[data-theme="light"] .audit-overlay {
  background: #f4f4f7;
}

body[data-theme="light"] .audit-overlay-close {
  background: #1e1b4b;
  color: #f4f4f7;
  border-color: #1e1b4b;
}

body[data-theme="light"] .audit-overlay-close:hover {
  background: var(--gradient-brand);
  border-color: transparent;
}

body[data-theme="light"] .audit-rotate-prompt {
  background: #f4f4f7;
}

body[data-theme="light"] .audit-rotate-prompt .rotate-icon {
  border-color: rgba(0,0,0,0.2);
}

body[data-theme="light"] .audit-rotate-prompt .rotate-icon::after {
  background: rgba(0,0,0,0.3);
}

body[data-theme="light"] .audit-rotate-prompt .rotate-text {
  color: rgba(0,0,0,0.5);
}

body[data-theme="light"] .audit-rotate-prompt .rotate-dismiss {
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.35);
}

body[data-theme="light"] .audit-rotate-prompt .rotate-dismiss:hover {
  border-color: rgba(0,0,0,0.3);
  color: rgba(0,0,0,0.6);
}

/* ============================================================
   DEBUG PANEL
   ============================================================ */
body[data-theme="light"] .debug-panel .debug-toggle {
  background: #1e1b4b;
  border-color: #1e1b4b;
  box-shadow: 0 4px 12px rgba(30, 27, 75, 0.25);
}

body[data-theme="light"] .debug-panel .debug-menu {
  background: #fafafc;
  border-color: #1e1b4b;
  box-shadow: 0 8px 30px rgba(30, 27, 75, 0.2);
}

body[data-theme="light"] .debug-panel .debug-title {
  color: #6366a0;
  border-bottom-color: #d8d9e4;
}

body[data-theme="light"] .debug-panel .debug-btn {
  border-color: #d8d9e4;
  color: #1e1b4b;
}

body[data-theme="light"] .debug-panel .debug-btn:hover {
  border-color: var(--accent, #14b8a6);
  background: rgba(20, 184, 166, 0.1);
}

body[data-theme="light"] .debug-panel .debug-btn.active {
  border-color: var(--accent-secondary, #7c3aed);
  background: rgba(124, 58, 237, 0.15);
  color: var(--accent-secondary, #7c3aed);
}

body[data-theme="light"] .debug-panel .debug-info {
  color: #8486b5;
}

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
body[data-theme="light"] .video-player-placeholder video {
  border-color: #e2e8f0;
}

/* ============================================================
   SMOOTH TRANSITION
   ============================================================ */
body[data-theme="light"],
body[data-theme="light"] * {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Exclude elements that need instant response */
body[data-theme="light"] .btn,
body[data-theme="light"] .btn-primary,
body[data-theme="light"] .product-card,
body[data-theme="light"] .feature-card,
body[data-theme="light"] .contact-card {
  transition: all 0.2s ease;
}

/* Back to top — light mode */
body[data-theme="light"] .back-to-top {
  background: #1e1b4b;
  color: #f4f4f7;
  border-color: #1e1b4b;
}

body[data-theme="light"] .back-to-top:hover {
  background: #f4f4f7;
  color: #1e1b4b;
}