/* ============================================================
   THEME — Light mode overrides
   All dark-mode defaults live in css/base.css :root {}
   Light mode is activated by [data-theme="light"] on <html>
============================================================ */

/* Smooth transition sweep during theme switch only (fallback path) */
html[data-transitioning] *,
html[data-transitioning] *::before,
html[data-transitioning] *::after {
  transition:
    background-color 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    fill 0.35s ease,
    stroke 0.35s ease !important;
}

/* Circular reveal theme switch (View Transitions API path) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---- Light mode CSS variables -------------------------------- */
[data-theme="light"] {
  --bg:          #F8F8FA;
  --bg-2:        #EEEFF3;
  --bg-card:     #FFFFFF;
  --bg-card-2:   #F4F4F8;
  --border:      rgba(0,0,0,0.08);
  --border-glow: rgba(var(--purple-rgb), 0.4);

  --text:        #09090B;
  --text-muted:  #52525B;
  --text-dim:    #A1A1AA;

  /* Primary switches from purple to a deep teal for contrast on light bg.
     Variable names stay --purple* so every component picks it up. */
  --purple:       #006A75;
  --purple-light: #006A75;
  --purple-dark:  #00545D;
  --purple-glow:  rgba(var(--purple-rgb), 0.2);
  --purple-rgb:       0,106,117;
  --purple-light-rgb: 0,106,117;
  --purple-dark-rgb:  0,84,93;

  --shadow-card: 0 4px 32px rgba(0,0,0,0.07);
  --shadow-glow: 0 0 48px rgba(var(--purple-rgb), 0.1);
}

/* ---- Hardcoded dark values that need light overrides --------- */

/* Hero night-sky background is dark-theme only */
[data-theme="light"] .hero {
  background-image: none;
}

/* Nav scrolled backdrop — frosted white glass */
[data-theme="light"] .nav.scrolled .nav__inner {
  background: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Mobile nav dropdown */
[data-theme="light"] .nav__mobile {
  background: rgba(248,248,250,0.97);
  border-top-color: var(--border);
}

/* Hero floating cards */
[data-theme="light"] .float-card {
  background: rgba(255,255,255,0.90);
}

/* Showcase float badges (index) */
[data-theme="light"] .showcase__float {
  background: rgba(255,255,255,0.90);
}

/* Giftlo themed icon circles */
[data-theme="light"] .gift-float {
  background: rgba(255,255,255,0.90);
}

/* Work card hover overlay */
[data-theme="light"] .work-card__overlay {
  background: rgba(248,248,250,0.82);
}

/* NextBestie floating feature tags */
[data-theme="light"] .nb-float-tag {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Showcase iPhone frame — soften the heavy dark drop shadow */
[data-theme="light"] .iphone-frame {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 24px 48px rgba(0,0,0,0.16),
    0 0 40px rgba(var(--purple-rgb), 0.12);
}