/* ============================================
   GrowMark — Light Mode Tokens
   ============================================ */

[data-theme="light"] {
  /* ── Colors ─────────────────────────────── */
  --clr-bg:            #ffffff;
  --clr-bg-alt:        #f5f5f5;
  --clr-surface:       #fcfcfc;
  --clr-surface-2:     #f0f0f0;
  --clr-surface-3:     #e0e0e0;
  --clr-surface-hover: #e8e8e8;
  --clr-surface-glass: rgba(255, 255, 255, 0.7);

  --clr-border:        rgba(0, 0, 0, 0.08);
  --clr-border-2:      rgba(0, 0, 0, 0.12);
  --clr-border-3:      rgba(0, 0, 0, 0.16);

  --clr-text:          #111111;
  --clr-text-secondary:#444444;
  --clr-text-muted:    #666666;
  --clr-text-dark:     #ffffff;

  /* ── Gradients ─────────────────────────── */
  --gradient-dark:     linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --gradient-card:     linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
  --gradient-border:   linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.02));
  
  --gradient-mesh:     radial-gradient(at 40% 20%, rgba(0,200,83,0.15) 0px, transparent 50%),
                       radial-gradient(at 80% 80%, rgba(124,58,237,0.1) 0px, transparent 50%),
                       radial-gradient(at 0% 100%, rgba(0,200,83,0.1) 0px, transparent 50%);

  /* ── Shadows ───────────────────────────── */
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:         0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg:         0 8px 48px rgba(0,0,0,0.08);
  --shadow-card:       0 4px 32px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,1);
  --shadow-card-hover: 0 8px 48px rgba(0,0,0,0.08), 0 0 40px rgba(0,200,83,0.15);
  --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.05);
}

/* ── Specific Overrides for Light Mode ───────────────────────── */

/* 1. Logo Styles & Loader */
[data-theme="light"] .page-loader {
  background: #ffffff;
}

[data-theme="light"] .navbar__logo img,
[data-theme="light"] .footer__logo img,
[data-theme="light"] .page-loader__img {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(253, 253, 253, 0.85);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0,0,0,0.05);
}

[data-theme="light"] .navbar__mobile {
  background: rgba(255, 255, 255, 0.95);
}

/* 2. Form Styles (Override hardcoded dark rgba values) */
[data-theme="light"] .contact__form-wrap {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .form__input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--clr-text);
}

[data-theme="light"] .form__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .form__input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.2);
}

[data-theme="light"] .contact__item-icon {
  background: #ffffff;
}

[data-theme="light"] .form__select-icon {
  color: rgba(0, 0, 0, 0.6);
}

/* Fix CTA noise and accent visibility */
[data-theme="light"] .cta__inner {
  background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .cta__accent {
  opacity: 0.05;
}