/* === Import Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* === Tailwind Directives === */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Custom Theme via Tailwind Layer === */
@layer base {
  html {
    font-family: 'Inter', sans-serif;
  }

  body {
    background-color: #FBFBFB; /* less green, near-white base */
    color: #1A2E1A;
  }
}

/* === Custom Font Classes === */
@layer utilities {
  .font-sora {
    font-family: 'Sora', sans-serif;
  }
  .font-inter {
    font-family: 'Inter', sans-serif;
  }
}

/* === Custom Colors === */
@layer utilities {
  .bg-sageBase { background-color: #FBFBFB; }
  .bg-sageMid { background-color: #F7F7F7; }
  .bg-sageAccent { background-color: #EFEFEF; }
  .text-textDark { color: #1A2E1A; }
  .text-textMuted { color: #4A5E4A; }
  .text-textHint { color: #6B7A6B; }
  .text-tealCta { color: #2E6E50; }
  .bg-tealCta { background-color: #2E6E50; }
  .bg-tealDark { background-color: #1A4A34; }
  .border-sageBorder { border-color: #B4C4B4; }
}

/* === Nav Link Underline Effect === */
nav a {
  position: relative;
}
nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background-color: #2E6E50;
  transition: width 0.25s ease;
}
nav a:hover::after {
  width: 100%;
}

/* === Skill Navigation Tabs Base Styles === */
.skill-tab {
  background-color: transparent;
  color: #4A5E4A;
}
  .skill-tab:hover {
  background-color: #EFEFEF;
  color: #1A2E1A;
}
.skill-tab.active {
  background-color: #2E6E50;
  color: #F4F8F5;
  border-color: #2E6E50;
}

#technologies .group {
  cursor: pointer;
}
#technologies .group:focus-visible {
  outline: 2px solid #2E6E50;
  outline-offset: 4px;
}
#technologies .group.selected {
  background-color: #FBFBFB;
  border-color: #2E6E50;
  box-shadow: 0 14px 40px rgba(46, 110, 80, 0.12);
}

/* === Pure CSS Selection Engine (3-way toggle) === */
#show-lang:checked ~ div #label-lang {
  background-color: #2E6E50;
  color: #F4F8F5;
  border-color: #2E6E50;
}
#show-lang:checked ~ #framework-container {
  display: none !important;
}
#show-lang:checked ~ #tools-container {
  display: none !important;
}
#show-lang:checked ~ #lang-container {
  display: grid !important;
}

#show-framework:checked ~ div #label-framework {
  background-color: #2E6E50;
  color: #F4F8F5;
  border-color: #2E6E50;
}
#show-framework:checked ~ #lang-container {
  display: none !important;
}
#show-framework:checked ~ #tools-container {
  display: none !important;
}
#show-framework:checked ~ #framework-container {
  display: grid !important;
}

#show-tools:checked ~ div #label-tools {
  background-color: #2E6E50;
  color: #F4F8F5;
  border-color: #2E6E50;
}
#show-tools:checked ~ #lang-container {
  display: none !important;
}
#show-tools:checked ~ #framework-container {
  display: none !important;
}
#show-tools:checked ~ #tools-container {
  display: grid !important;
}

/* === Cards Interaction Models === */
.skill-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(46, 110, 80, 0.12);
}

/* Unified Project Card Physics */
.proj-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 3px solid #2E6E50; /* Premium branded top accent bar */
}
.proj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(46, 110, 80, 0.15);
}

/* === Custom Scrollbar Configuration === */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F7F7F7;
}
::-webkit-scrollbar-thumb {
  background: #B4C4B4;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2E6E50;
}

/* === Custom Blinking Typing Cursor Framework === */
.cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background-color: #2E6E50;
  margin-left: 2px;
  vertical-align: baseline;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.cursor.typing {
  animation: none;
  opacity: 1;
}

/* Timeline date tooltip shown when hovering the marker circle */
.group/item .date-tooltip {
  position: absolute;
  left: -140px;
  top: 50%;
  transform: translateY(-50%) translateY(4px);
  background-color: #FBFBFB;
  border: 1px solid #B4C4B4;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  color: #6B7A6B;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}
.group/item:hover .date-tooltip,
.group/item:focus-within .date-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
  pointer-events: auto;
}