:root {
/* --- DARK THEME (Hero, Footer, Dark Sections) --- */
  --color-bg-deep: #0f172a;       /* Darkest - Slate 900 */
  --color-bg-card: #1e293b;       /* Slightly lighter - Slate 800 */
  --color-border: #334155;   /* Subtle dividers in dark mode */
  --color-text-main: #f8fafc;     /* Bright White headings */
  --color-text-muted: #94a3b8;    /* Slate Gray descriptions */

  --color-light-bg: #f8fafc;      /* Background Slate 50 */
  --color-white-bg: #ffffff;
  --color-light-card: #ffffff;    /* Pure White for cards/sections */
  --color-light-border: #e2e8f0;  /* Slate 200 for grounded lines */
  --color-light-text: #0f172a;    /* Deep Slate 900 for readability */
  --color-light-text-muted: #64748b; /* Slate 500 for secondary text */

  --color-primary: #22d3ee;       /* Kinetic Cyan */
  --color-primary-dim: #0891b2;   /* Muted Cyan (Hose/Borders) */
  --color-primary-dark: #0e7490;  /* Darker Cyan for hover states */
  --color-secondary: #0d9488;     /* Teal (Pressure) */

/* --- CATEGORY ACCENTS (UI Badges) --- */
  --color-accent-blue: #2563eb;   /* Simulation Blue */
  --color-accent-indigo: #4f46e5; /* Solver Indigo */
  --color-accent-emerald: #059669; /* Validation Green */
  --color-accent-orange: #e77c42; /* Consultation Orange *

/* --- ACADEMIC PLATFORMS --- */
  --color-linkedin: #0077b5;
  --color-researchgate: #00ccbb;
  --color-orcid: #a6ce39;
  --color-scholar: #4285f4;

  /* --- FUNCTIONAL --- */
  --color-success: #10b981;
  --color-error: #ef4444;
}

/* Global Base Styles */
body {
  background-color: var(--color-bg-deep);
  color: var(--color-text-main);
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: var(--color-text-main);
}

.nav-link {
  color: var(--color-text-muted);
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  color: var(--color-primary) !important;
  font-weight: 700;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.nav-link-btn {
  background-color: var(--color-primary) !important;
  color: var(--color-bg-deep) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.nav-link-btn:hover {
  background-color: var(--color-text-main) !important;
  color: var(--color-bg-deep) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
  transform: translateY(-2px);
}

.nav-link-btn.active {
  background-color: var(--color-text-main) !important;
  color: var(--color-bg-deep) !important;
  border: 1px solid var(--color-primary);
}

.nav-link-btn.active::after {
  display: none !important;
}

.project-card,
.skill-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f1f5f9; /* slate-100 */
  opacity: 1;
  transform: scale(1);
  display: flex;
  flex-direction: column;
}

.skill-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px -5px rgba(34, 211, 238, 0.1),
    0 8px 10px -6px rgba(34, 211, 238, 0.1);
}

.skill-card.hidden {
  display: none;
  opacity: 0;
  transform: scale(0.9);
}

.project-card.is-hidden {
  opacity: 0 !important;
  transform: scale(0.92);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.filter-btn.active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-bg-deep) !important;
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
}