/* ================================================================
   DARK MODE
   Following Material Design 3 and Microsoft Fluent 2 best practices.

   Key principles applied:
   – Background: #121212 (M2 canonical, not pure black)
   – Text: rgba(255,255,255,0.87) high-emphasis (M2), not pure white
   – Elevation: lighter surfaces = higher elevation
   – Accents: desaturated / lighter tones
   – Borders: subtle (12% white or outline-variant)
   – Sun icon in dark mode, moon icon in light mode (target-state)
   ================================================================ */

/* ── Nav right group (Resume + toggle) ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-nav);
  padding: 0;
  transition: background 220ms cubic-bezier(.22,1,.36,1),
              border-color 220ms cubic-bezier(.22,1,.36,1),
              color 220ms cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--c-hover);
  border-color: var(--c-hover);
  color: #fff;
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
}

/* Icon convention: moon in light = "click for dark", sun in dark = "click for light" */
.theme-icon--sun  { display: none; }
.theme-icon--moon { display: block; }

/* Mobile drawer toggle */
.theme-toggle--drawer {
  margin-top: 16px;
  align-self: flex-start;
  width: 36px;
  height: 36px;
}
.theme-toggle--drawer svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .nav-right { display: none; }
}
@media (min-width: 901px) {
  .theme-toggle--drawer { display: none; }
}


/* ================================================================
   DARK PALETTE
   Material Design 3 tonal surface scale with Fluent-informed greys.
   ================================================================ */
html[data-theme="dark"] {
  /* Surface scale (M3 tonal: lower = darker, higher = lighter) */
  --c-bg:       #121212;                    /* M2 canonical dark surface */
  --c-surface:  #1D1B20;                    /* M3 surface-container-low */
  --c-panel:    #211F26;                    /* M3 surface-container */

  /* Text (M2: 87% / 60% / 38% white) */
  --c-ink:      rgba(255,255,255,0.87);     /* High emphasis */
  --c-mid:      rgba(255,255,255,0.60);     /* Medium emphasis */
  --c-light:    rgba(255,255,255,0.53);     /* Hint — meets 4.5:1 on #121212 */
  --c-ghost:    rgba(255,255,255,0.12);     /* Ghost / divider */
  --c-ink-pure: #FFFFFF;

  /* Borders (M3 outline-variant) */
  --c-rule:     rgba(255,255,255,0.12);     /* M2 divider standard */
  --c-rule-dk:  rgba(255,255,255,0.20);
  --c-border:   rgba(255,255,255,0.16);

  /* Interactive */
  --c-nav:      rgba(255,255,255,0.60);
  --c-hover:    rgba(255,255,255,0.87);

  /* Shadows (invisible on dark — elevation via surface lightening) */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;

  color-scheme: dark;
}


/* ================================================================
   ICON SWAP
   ================================================================ */
html[data-theme="dark"] .theme-icon--sun  { display: block; }
html[data-theme="dark"] .theme-icon--moon { display: none; }

html[data-theme="dark"] .theme-toggle:hover {
  color: #121212;
}


/* ================================================================
   NAVIGATION
   M3: top app bar uses surface-container on scroll (~#211F26)
   ================================================================ */
html[data-theme="dark"] .nav.s {
  background: rgba(18,18,18,0.92) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .nav-drawer {
  background: #121212 !important;
}

/* Hover: invert for dark (text becomes dark on light bg) */
html[data-theme="dark"] .nav-links a:hover {
  background: rgba(255,255,255,0.87);
  color: #121212 !important;
}

/* Active tab + hover: same as other nav links (light bar behind scrolled .nav.s overrode :hover color) */
html[data-theme="dark"] .nav.s .nav-links a[aria-current="page"]:hover {
  background: rgba(255,255,255,0.87);
  color: #121212 !important;
}

html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .nav.s .nav-cta:hover {
  background: rgba(255,255,255,0.87);
  border-color: rgba(255,255,255,0.87);
  color: #121212 !important;
}


/* ================================================================
   HERO  (hardcoded background + text colors)
   ================================================================ */
html[data-theme="dark"] .hero {
  background: #121212 !important;
}

/* Smooth the orb container's left edge so it blends naturally */
html[data-theme="dark"] #wave-bg {
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 30%,
      black 50%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 55%, transparent 100%) !important;
  -webkit-mask-composite: destination-in !important;
  mask-image: linear-gradient(to right,
      transparent 0%, black 30%,
      black 50%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 55%, transparent 100%) !important;
  mask-composite: intersect !important;
}

/* Hero title: hardcoded #0a0a0a → high-emphasis white */
html[data-theme="dark"] .hero-name {
  color: rgba(255,255,255,0.87) !important;
}

/* Hero descriptor text */
html[data-theme="dark"] .hero-descriptor {
  color: rgba(255,255,255,0.70) !important;
}
html[data-theme="dark"] .hero-descriptor strong {
  color: rgba(255,255,255,0.87) !important;
}

/* Hero bottom fade: dissolve into dark page */
html[data-theme="dark"] .hero::after {
  background: linear-gradient(to bottom,
    rgba(18,18,18,0)    0%,
    rgba(18,18,18,0.4)  40%,
    rgba(18,18,18,0.85) 70%,
    rgba(18,18,18,1)    100%) !important;
}


/* ================================================================
   CARDS  (hardcoded #fff backgrounds → elevated dark surface)
   M3: cards use surface-container-low (#1D1B20)
   ================================================================ */
html[data-theme="dark"] .pcard {
  background: var(--c-surface) !important;
}
html[data-theme="dark"] .pcard-img {
  background: var(--c-surface) !important;
}
html[data-theme="dark"] .pcard-img img,
html[data-theme="dark"] .pcard-img .ph {
  background: var(--c-surface) !important;
}

/* Card title overlay text stays white (already on dark gradient) */
html[data-theme="dark"] .pcard-title {
  color: #fff;
}

/* Placeholder cards */
html[data-theme="dark"] .ph-1, html[data-theme="dark"] .ph-2,
html[data-theme="dark"] .ph-3, html[data-theme="dark"] .ph-4,
html[data-theme="dark"] .ph-5, html[data-theme="dark"] .ph-6,
html[data-theme="dark"] .ph-7, html[data-theme="dark"] .ph-8 {
  background: var(--c-panel) !important;
  color: rgba(255,255,255,0.08) !important;
}


/* ================================================================
   HOVER STATES  (light: dark bg + white text → dark: light bg + dark text)
   Every interactive element with hardcoded color:#fff on hover
   ================================================================ */
/* ── Expertise tags (about page) ── */
html[data-theme="dark"] .expertise-tag {
  color: rgba(255,255,255,0.87) !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.25) !important;
  font-weight: 400 !important;
}

html[data-theme="dark"] .sh-link:hover,
html[data-theme="dark"] .skill:hover,
html[data-theme="dark"] .about-link:hover,
html[data-theme="dark"] .expertise-tag:hover,
html[data-theme="dark"] .contact-email:hover {
  background: rgba(255,255,255,0.87) !important;
  color: #121212 !important;
  border-color: rgba(255,255,255,0.87) !important;
}
html[data-theme="dark"] .sh-link:hover svg {
  color: #121212 !important;
}


/* ================================================================
   FOOTER VISUAL  (hardcoded #fff bg → dark)
   ================================================================ */
html[data-theme="dark"] .footer-visual,
html[data-theme="dark"] .fv {
  background: #121212 !important;
}

html[data-theme="dark"] .fv::before {
  background: linear-gradient(to bottom, #121212 0%, transparent 100%) !important;
}
html[data-theme="dark"] .fv::after {
  background: linear-gradient(to bottom, transparent 0%, #121212 100%) !important;
}

html[data-theme="dark"] .footer-visual::before {
  background: linear-gradient(to bottom, #121212 0%, transparent 100%) !important;
}
html[data-theme="dark"] .footer-visual::after {
  background: linear-gradient(to bottom, transparent 0%, #121212 100%) !important;
}


/* ================================================================
   FOOTER  (hardcoded #fff → dark)
   ================================================================ */
html[data-theme="dark"] .footer {
  background: #121212 !important;
  border-color: rgba(255,255,255,0.08) !important;
}


/* ================================================================
   ABOUT PAGE – approach section (hardcoded dark text → light)
   ================================================================ */
html[data-theme="dark"] .approach-body {
  color: rgba(255,255,255,0.60) !important;
}
html[data-theme="dark"] .approach-body strong {
  color: rgba(255,255,255,0.87) !important;
}
html[data-theme="dark"] .about-body {
  color: rgba(255,255,255,0.60) !important;
}
html[data-theme="dark"] .about-body strong {
  color: rgba(255,255,255,0.87) !important;
}


/* ================================================================
   EXPERIENCE / SECTIONS  (hardcoded #fff → dark)
   ================================================================ */
html[data-theme="dark"] .experience {
  background: #121212 !important;
}


/* ================================================================
   FORMS
   M3: input fields use surface-container on dark
   ================================================================ */
html[data-theme="dark"] .f-input {
  background: var(--c-surface) !important;
  color: rgba(255,255,255,0.87) !important;
  border-color: rgba(255,255,255,0.30) !important; /* 3:1+ against surface */
}
html[data-theme="dark"] .f-input:focus {
  background: var(--c-panel) !important;
  border-color: rgba(255,255,255,0.60) !important;
}
html[data-theme="dark"] .f-input::placeholder {
  color: rgba(255,255,255,0.53);
}
html[data-theme="dark"] .f-submit,
html[data-theme="dark"] .f-btn {
  background: rgba(255,255,255,0.87) !important;
  color: #121212 !important;
  border-color: rgba(255,255,255,0.87) !important;
}
html[data-theme="dark"] .f-submit:hover,
html[data-theme="dark"] .f-btn:hover {
  background: #fff !important;
  border-color: #fff !important;
}


/* ================================================================
   SCROLLBAR  (M3-informed subtle styling)
   ================================================================ */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #121212;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}


/* ================================================================
   PROJECT PAGES  (hardcoded #fff backgrounds → dark)
   ================================================================ */
html[data-theme="dark"] .proj-page {
  background: #121212 !important;
}
html[data-theme="dark"] .proj-hero {
  background: #121212 !important;
}
html[data-theme="dark"] .proj-next {
  background: #121212 !important;
}

/* Project image containers — keep white bg for screenshots */
html[data-theme="dark"] .proj-cover,
html[data-theme="dark"] .proj-cover-ph {
  background: #fff !important;
}
html[data-theme="dark"] .proj-img-grid img {
  background: #fff !important;
}
html[data-theme="dark"] .proj-img-full,
html[data-theme="dark"] .proj-img-full-ph {
  background: #fff !important;
}

/* Project breadcrumb link */
html[data-theme="dark"] .proj-breadcrumb a {
  color: rgba(255,255,255,0.60);
}


/* ================================================================
   NDA BLOCK  (hardcoded #fff bg + light glow → dark)
   ================================================================ */
html[data-theme="dark"] .proj-nda {
  background: transparent !important;
}
html[data-theme="dark"] .proj-nda-glow {
  background:
    radial-gradient(ellipse 65% 55% at 38% 45%, rgba(130, 224, 255, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 50% 48% at 44% 52%, rgba(175, 240, 255, 0.08) 0%, transparent 52%) !important;
}
html[data-theme="dark"] .proj-nda-title {
  color: rgba(255,255,255,0.87) !important;
}
html[data-theme="dark"] .proj-nda-lead {
  color: rgba(255,255,255,0.87) !important;
}
html[data-theme="dark"] .proj-nda-body {
  color: rgba(255,255,255,0.60) !important;
}
html[data-theme="dark"] .proj-nda-rule {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent) !important;
}


/* ================================================================
   WORK PAGE  (hero + grids + visual band)
   ================================================================ */
html[data-theme="dark"] .work-hero {
  background: transparent !important;
}
html[data-theme="dark"] .work-hero-band {
  background: transparent !important;
}
html[data-theme="dark"] .work-hero-visual {
  background: transparent !important;
}
html[data-theme="dark"] .work-hero-visual::before {
  background: linear-gradient(to bottom, #121212 0%, transparent 100%) !important;
}
html[data-theme="dark"] .work-hero-visual::after {
  background: linear-gradient(to bottom, transparent 0%, #121212 100%) !important;
}

/* Dark mode: orbs full-width, canvas on top so strokes are visible */
html[data-theme="dark"] .work-hero-visual .fv-blobs {
  left: 0 !important;
  z-index: 1 !important;
  overflow: visible !important;
}
html[data-theme="dark"] #work-hero-canvas {
  z-index: 3 !important;
  left: 0 !important;
  width: 100% !important;
  background: transparent !important;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 45%, black 100%) !important;
  mask-image: linear-gradient(to right,
      transparent 0%, black 45%, black 100%) !important;
}
html[data-theme="dark"] .work-hero-inner {
  background: transparent !important;
}
html[data-theme="dark"] .work-page {
  background: transparent !important;
}


/* ================================================================
   CURSOR (mix-blend-mode: difference — stays white in both modes)
   ================================================================ */
html[data-theme="dark"] #img-cursor {
  background: #ffffff !important;
}


/* ================================================================
   LOGO
   ================================================================ */
html[data-theme="dark"] .nav-logo svg {
  color: rgba(255,255,255,0.87);
}


/* ================================================================
   ORBS (vibrancy boost in dark — pastels pop on dark backgrounds)
   M3: desaturated / lighter accent tones on dark surfaces
   ================================================================ */
html[data-theme="dark"] .orb {
  opacity: 0.7;
}
html[data-theme="dark"] .fv-orb {
  opacity: 0.55;
}


/* ================================================================
   IMAGES  (M3: reduce brightness ~15% to reduce glare on dark bg)
   ================================================================ */
html[data-theme="dark"] .pcard-img img:not(.ph),
html[data-theme="dark"] .proj-cover,
html[data-theme="dark"] .proj-img-grid img,
html[data-theme="dark"] .proj-img-full,
html[data-theme="dark"] .about-portrait-img {
  filter: brightness(0.88);
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}
html[data-theme="dark"] .pcard:hover .pcard-img img:not(.ph) {
  filter: brightness(1);
}


/* ================================================================
   SYSTEM PREFERENCE – first-time visitors (no localStorage set)
   Duplicates the dark palette for prefers-color-scheme users
   ================================================================ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --c-bg:       #121212;
    --c-surface:  #1D1B20;
    --c-panel:    #211F26;
    --c-ink:      rgba(255,255,255,0.87);
    --c-mid:      rgba(255,255,255,0.60);
    --c-light:    rgba(255,255,255,0.53);
    --c-ghost:    rgba(255,255,255,0.12);
    --c-rule:     rgba(255,255,255,0.12);
    --c-rule-dk:  rgba(255,255,255,0.20);
    --c-ink-pure: #FFFFFF;
    --c-nav:      rgba(255,255,255,0.60);
    --c-hover:    rgba(255,255,255,0.87);
    --c-border:   rgba(255,255,255,0.16);
    color-scheme: dark;
  }
}