/* -------------------------------------------------------------------------- */
/*                                General-Start                               */
/* -------------------------------------------------------------------------- */
:root {
  /* existing vars... */
  --bg: #fffff0;
  --text: #2a2a2a;
  --accent: #555555;
  --accent-rgb: 85, 85, 85;
}

/* 🎯 Light theme cursors */
html:not([data-theme="dark"]) body {
  cursor: url('/imgs/light-theme-cursor.png') 4 4, auto;
}

html:not([data-theme="dark"]) a,
html:not([data-theme="dark"]) button,
html:not([data-theme="dark"]) .clickable {
  cursor: url('/imgs/light-theme-pointer.png') 4 4, pointer;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) [contenteditable="true"] {
  cursor: url('/imgs/light-theme-text-cursor.png') 4 12, text;
}

html[data-theme="dark"] {
  /* existing vars... */
  --bg: #1c1c1e;
  --text: #cccccc;
  --accent: #eeeeee;
  --accent-rgb: 238, 238, 238;
  

}

/* 🎯 Dark theme cursors */
html[data-theme="dark"] body {
  cursor: url('/imgs/dark-theme-cursor.png') 4 4, auto;
}

html[data-theme="dark"] a,
html[data-theme="dark"] button,
html[data-theme="dark"] .clickable {
  cursor: url('/imgs/dark-theme-pointer.png') 4 4, pointer;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] [contenteditable="true"] {
  cursor: url('/imgs/dark-theme-text-cursor.png') 4 12, text;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}


/* ── Background Depth ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  text-align: center;
  
}


/* Center the main container */
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* -------------------------------------------------------------------------- */
/*                                 General-End                                */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/*                                Footer-Start                                */
/* -------------------------------------------------------------------------- */
footer {
  padding: 2rem 1rem 1rem;
  background-color: var(--bg);
  color: var(--accent);
  border-top: 1px solid rgba(var(--accent-rgb), 0.1);
  font-size: 0.9rem;
  text-align: center;
}

.footer-brand {
  font-weight: 500;
  letter-spacing: 0.03em;
}
/* -------------------------------------------------------------------------- */
/*                                 Footer-End                                 */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/*                               Scrollbar-Start                              */
/* -------------------------------------------------------------------------- */

/* WebKit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg);
  border-radius: 8px;
  box-shadow: inset 0 0 2px rgba(var(--accent-rgb), 0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.4),
    rgba(var(--accent-rgb), 0.6)
  );
  border-radius: 8px;
  border: 2px solid var(--bg);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.6),
    rgba(var(--accent-rgb), 0.8)
  );
  box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.3);
}

/* Dark theme overrides */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg);
}

/* Firefox fallback */
* {
  scrollbar-width: auto;
  scrollbar-color: rgba(var(--accent-rgb), 0.5) var(--bg);
}


/* -------------------------------------------------------------------------- */
/*                                Scrollbar-End                               */
/* -------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------- */
/*                                 Media-Start                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  header {
    padding: 1.5rem;
    margin: 1rem;
  }
}

/* --------------------- Phone-View-Stuck-On-Focus-Start -------------------- */
@media (hover: none) {
  .social-icons a:hover,
  .social-icons a:active,
  .social-icons a:focus,
  #theme-toggle:hover,
  #theme-toggle:active,
  #theme-toggle:focus {
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav-menu a:hover,
  .nav-menu a:active,
  .nav-menu a:focus {
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    outline: none !important;
  }

  .nav-menu a:hover::after,
  .nav-menu a:active::after,
  .nav-menu a:focus::after {
    transform: scaleX(0) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button-style:hover,
  .button-style:active,
  .button-style:focus {
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* ---------------------- Phone-View-Stuck-On-Focus-End --------------------- */
/* -------------------------------------------------------------------------- */
/*                                  Media-End                                 */
/* -------------------------------------------------------------------------- */