/* ui-extras.css — small complementary rules (no nav duplication) */

/* Dark-theme specific accents (applies when html[data-theme='dark']) */
html[data-theme='dark'] {
  --accent: #0abaff;
  --primary: #a259ff;
}

/* Light-theme specific overrides (applies when html[data-theme='light']) */
html[data-theme='light'] {
  --accent: #0a88b8;
  --primary: #6b4dff;
}

/* glass button variations */
.btn-glass.secondary { border-color: rgba(255,255,255,0.04); }

/* center modal content on small screens (safety) */
@media (max-width:600px) {
  .modal-panel { width:92%; max-width:420px; padding:14px; }
  .modal-panel img { width:100%; height:auto; object-fit:contain; display:block; margin:0 auto 12px; }
}

/* tiny accessibility focus ring */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(162,89,255,0.14); outline-offset: 2px; }
/* ============================
   DARK MODE OVERRIDES (FORCED)
   ============================ */
.dark-mode .site-title,
.dark-mode .logo-text,
.dark-mode nav a,
.dark-mode .nav-links a {
    color: #ffffff !important;
}

/* Mobile nav menu text */
.dark-mode .mobile-nav a {
    color: #ffffff !important;
}

/* Hamburger icon lines */
.dark-mode .hamburger span {
    background: #ffffff !important;
}

/* SEND MESSAGE button */
.dark-mode .contact-button,
.dark-mode .contact-button:link,
.dark-mode .contact-button:visited {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* SEND MESSAGE button hover */
.dark-mode .contact-button:hover {
    background-color: #e5e5e5 !important;
    color: #000000 !important;
}

/* Portfolio modal close/X button */
.dark-mode .modal-close {
    color: #ffffff !important;
}