/* ═══════════════════════════════════════════════
   THEMES — dark (default) & light
   ═══════════════════════════════════════════════ */

/* ─── DARK THEME (default) ─── */
:root {
  --color-bg:           #050B18;
  --color-bg-1:         #0A1628;
  --color-bg-2:         #0F2040;
  --color-border:       rgba(76, 158, 235, 0.10);
  --color-border-glow:  rgba(76, 158, 235, 0.35);

  --color-accent-blue:   #4C9EEB;
  --color-accent-mint:   #64D8A3;
  --color-accent-purple: #9D7FEA;
  --color-accent-amber:  #F0B429;
  --color-accent-rose:   #F56565;
  --color-accent-cyan:   #56CCF2;

  --color-text-primary:   #E8F0FE;
  --color-text-secondary: #8BA3C7;
  --color-text-muted:     #4A6785;

  --shadow-card:  0 4px 32px rgba(0, 0, 0, 0.50);
  --glow-blue:    0 0 40px rgba(76, 158, 235, 0.18);
  --glow-mint:    0 0 40px rgba(100, 216, 163, 0.14);
  --glass-bg:     rgba(10, 22, 40, 0.65);
  --glass-border: rgba(76, 158, 235, 0.14);

  --sidebar-bg:    rgba(5, 11, 24, 0.97);
  --nav-active-bg: rgba(76, 158, 235, 0.07);
  --nav-hover-bg:  rgba(76, 158, 235, 0.04);
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  --color-bg:           #F0F4FB;
  --color-bg-1:         #FFFFFF;
  --color-bg-2:         #E2EAF6;
  --color-border:       rgba(29, 78, 216, 0.12);
  --color-border-glow:  rgba(29, 78, 216, 0.38);

  --color-accent-blue:   #1D4ED8;
  --color-accent-mint:   #059669;
  --color-accent-purple: #7C3AED;
  --color-accent-amber:  #D97706;
  --color-accent-rose:   #DC2626;
  --color-accent-cyan:   #0284C7;

  --color-text-primary:   #0F172A;
  --color-text-secondary: #334155;
  --color-text-muted:     #64748B;

  --shadow-card:  0 4px 24px rgba(15, 23, 42, 0.09);
  --glow-blue:    0 0 30px rgba(29, 78, 216, 0.12);
  --glow-mint:    0 0 30px rgba(5, 150, 105, 0.10);
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-border: rgba(29, 78, 216, 0.12);

  --sidebar-bg:    rgba(243, 247, 255, 0.98);
  --nav-active-bg: rgba(29, 78, 216, 0.07);
  --nav-hover-bg:  rgba(29, 78, 216, 0.04);
}

/* ─── SMOOTH THEME TRANSITION ─── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 350ms ease,
    color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease !important;
}

/* ─── LIGHT THEME COMPONENT OVERRIDES ─── */

/* Hero background */
[data-theme="light"] .hero__bg-grid {
  background-image:
    linear-gradient(rgba(29, 78, 216, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, 0.05) 1px, transparent 1px);
}

[data-theme="light"] .hero__orb--1 {
  background: radial-gradient(circle, rgba(29, 78, 216, 0.07), transparent 70%);
}

[data-theme="light"] .hero__orb--2 {
  background: radial-gradient(circle, rgba(5, 150, 105, 0.06), transparent 70%);
}

/* Skill tags */
[data-theme="light"] .skill-tag[data-color="blue"]   { background: rgba(29,78,216,0.08);  border-color: rgba(29,78,216,0.25);  color: #1D4ED8; }
[data-theme="light"] .skill-tag[data-color="mint"]   { background: rgba(5,150,105,0.08);  border-color: rgba(5,150,105,0.25);  color: #059669; }
[data-theme="light"] .skill-tag[data-color="purple"] { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); color: #7C3AED; }
[data-theme="light"] .skill-tag[data-color="amber"]  { background: rgba(217,119,6,0.08);  border-color: rgba(217,119,6,0.25);  color: #D97706; }
[data-theme="light"] .skill-tag[data-color="rose"]   { background: rgba(220,38,38,0.08);  border-color: rgba(220,38,38,0.25);  color: #DC2626; }
[data-theme="light"] .skill-tag[data-color="cyan"]   { background: rgba(2,132,199,0.08);  border-color: rgba(2,132,199,0.25);  color: #0284C7; }

/* Tech tags */
[data-theme="light"] .tech-tag {
  background: rgba(29, 78, 216, 0.07);
  border-color: rgba(29, 78, 216, 0.20);
  color: #1D4ED8;
}

[data-theme="light"] .tech-tag:hover {
  background: rgba(29, 78, 216, 0.14);
  border-color: rgba(29, 78, 216, 0.38);
}

/* Cert card icons */
[data-theme="light"] .cert-card[data-color="blue"]  .cert-card__icon-wrap { background: rgba(29,78,216,0.10);  color: #1D4ED8; }
[data-theme="light"] .cert-card[data-color="mint"]  .cert-card__icon-wrap { background: rgba(5,150,105,0.10);  color: #059669; }
[data-theme="light"] .cert-card[data-color="amber"] .cert-card__icon-wrap { background: rgba(217,119,6,0.10);  color: #D97706; }

/* Cert card hover glow */
[data-theme="light"] .cert-card[data-color="blue"]:hover  { box-shadow: var(--shadow-card), 0 0 20px rgba(29,78,216,0.12); }
[data-theme="light"] .cert-card[data-color="mint"]:hover  { box-shadow: var(--shadow-card), 0 0 20px rgba(5,150,105,0.10); }
[data-theme="light"] .cert-card[data-color="amber"]:hover { box-shadow: var(--shadow-card), 0 0 20px rgba(217,119,6,0.10); }

/* Project status badge */
[data-theme="light"] .project-card__status--production {
  background: rgba(5, 150, 105, 0.09);
  border-color: rgba(5, 150, 105, 0.28);
  color: #059669;
}

/* Highlight card shimmer */
[data-theme="light"] .highlight-card::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29, 78, 216, 0.05) 50%,
    transparent 100%
  );
}

/* Timeline dots */
[data-theme="light"] .timeline-item::before {
  box-shadow: 0 0 10px rgba(29, 78, 216, 0.40);
}

[data-theme="light"] .timeline-item:first-child::before {
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.40);
}

/* Sidebar monogram glow */
[data-theme="light"] .sidebar__monogram {
  box-shadow: 0 2px 12px rgba(29, 78, 216, 0.20);
}

/* Photo bracket glow */
[data-theme="light"] .hero__photo-inner {
  border-color: rgba(29, 78, 216, 0.22);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.10);
}