/* Custom Styles for Portfolio */

:root {
  /* Default: Noir Silver Glow */
  --brand-primary: #ffffff;
  --brand-secondary: #a3a3a3;
  --brand-accent: #ffffff;
  --brand-deep: #000000;
  --brand-card: #0a0a0a;
  --brand-border: #262626;
  --brand-text-glow: rgba(255, 255, 255, 0.2);
  --brand-glow-color: rgba(255, 255, 255, 0.55);
}

[data-theme="blue"] {
  /* Noir Cyan Glow */
  --brand-primary: #ffffff;
  --brand-secondary: #06b6d4;
  --brand-accent: #22d3ee;
  --brand-deep: #000000;
  --brand-card: #08090c;
  --brand-border: #162030;
  --brand-text-glow: rgba(6, 182, 212, 0.3);
  --brand-glow-color: rgba(34, 211, 238, 0.65);
}

[data-theme="teal"] {
  /* Noir Violet Glow */
  --brand-primary: #ffffff;
  --brand-secondary: #d946ef;
  --brand-accent: #f472b6;
  --brand-deep: #000000;
  --brand-card: #0c0812;
  --brand-border: #2a113d;
  --brand-text-glow: rgba(217, 70, 239, 0.3);
  --brand-glow-color: rgba(244, 114, 182, 0.65);
}

/* Glowing Text Shadow on Headings */
h1, h2, h3 {
  text-shadow: 0 0 8px var(--brand-text-glow) !important;
}

/* Disable text shadow on gradient text to prevent rendering bugs and blurriness */
.bg-clip-text,
[class*="bg-clip-text"],
.text-transparent {
  text-shadow: none !important;
}

/* Custom theme overrides for text color */
[data-theme="custom"] body,
[data-theme="custom"] .text-slate-100,
[data-theme="custom"] .text-slate-200,
[data-theme="custom"] .text-slate-300,
[data-theme="custom"] .text-white {
  color: var(--brand-primary) !important;
}

[data-theme="custom"] .text-slate-400,
[data-theme="custom"] .text-slate-500 {
  color: color-mix(in srgb, var(--brand-primary) 70%, transparent) !important;
}

/* Light theme overrides */
.light-theme {
  --brand-primary: #0f172a; /* Dark Slate default, can be overridden by custom text picker */
  --brand-secondary: #475569;
  --brand-accent: #0284c7; /* Blue Accent */
  --brand-text-glow: rgba(0, 0, 0, 0.05) !important;
  --brand-glow-color: transparent !important; /* No glow on light background */
}

.light-theme,
.light-theme body {
  color: var(--brand-primary) !important;
}

/* Override all the text-slate-X and text-white classes under .light-theme */
.light-theme .text-slate-100,
.light-theme .text-slate-200,
.light-theme .text-slate-300,
.light-theme .text-white {
  color: var(--brand-primary) !important;
}

.light-theme .text-slate-400,
.light-theme .text-slate-500 {
  color: var(--brand-secondary) !important;
}

/* Also make sure nav links hover state and buttons look correct */
.light-theme .nav-link,
.light-theme .mobile-nav-link,
.light-theme .mobile-bottom-nav-link {
  color: var(--brand-secondary) !important;
}

.light-theme .nav-link:hover,
.light-theme .mobile-nav-link:hover,
.light-theme .mobile-bottom-nav-link.text-brand-primary {
  color: var(--brand-primary) !important;
}

.light-theme .bg-brand-card {
  background-color: var(--brand-card) !important;
}

.light-theme .border-brand-border {
  border-color: var(--brand-border) !important;
}

.light-theme .bg-brand-deep {
  background-color: var(--brand-deep) !important;
}

.light-theme h1, 
.light-theme h2, 
.light-theme h3 {
  text-shadow: none !important;
  color: var(--brand-primary) !important;
}


/* Global Transition for Theme Switching */
body, nav, section, footer, div, span, a, h1, h2, h3, p, label, input, textarea, button {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--brand-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}

/* Nav Link Custom Underline Effect */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(to right, var(--brand-primary), var(--brand-accent));
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Custom card glow & floating animation */
.project-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-primary);
  box-shadow: 0 20px 40px -15px var(--brand-text-glow);
}

/* Skill pills hover scale and glow */
.skill-pill {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-pill:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 20px -6px var(--brand-text-glow);
}

/* Sticky Bottom Nav Safe Area Support & Custom highlight transitions */
#mobile-bottom-nav {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-nav-link.text-brand-primary i {
  filter: drop-shadow(0 0 8px var(--brand-glow-color));
}

#mobile-bottom-sheet-content {
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}