:root {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-text: #eaeaea;
    --color-muted: #aaaaaa;

    --color-accent: #00adb5;
    --color-accent-hover: #00e5ff;
    --color-border: #2a2a2a;
    --shadow-glow: 0 0 8px rgba(0, 229, 255, 0.35);
  }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
  }

  h1,h2,h3 {
    font-family: 'Chivo', sans-serif;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
  }

  code, .tech-tag {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    background: rgba(0, 173, 181, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
  }

  header, footer {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem;
  }

  nav a {
    color: var(--color-accent);
    text-decoration: none;
    margin: 0 0.75rem;
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  a:focus {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}


  /* Cards / Project blocks */
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
     .logo-gradient {
    background: linear-gradient(45deg, #00adb5, #00e5ff, #ff00ff, #00adb5);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: gradientShift 15s ease-in-out infinite;
  }

  /* Header fade-in */
  .hidden-before-load {
    opacity: 0;
    transform: translateY(-8px);
  }
  .fade-in-loaded {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }


@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.8s ease forwards;
}

#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

#mobile-menu.open {
  max-height: 300px; /* adjust depending on menu size */
  opacity: 1;
}

.project-link {
  color: #aaaaaa; /* default gray */
  transition: color 0.25s ease, text-shadow 0.25s ease;
}