/* ============================================================
   QuanticFlux — custom layer on top of Tailwind (Play CDN)
   Kept deliberately small: utilities and layout come from
   Tailwind classes in the HTML; this file only holds things
   Tailwind cannot express cleanly.
   ============================================================ */

:root {
  --qf-brand-1: #9F8048;   /* deep gold */
  --qf-brand-2: #D2BE77;   /* bright gold */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accent gradient text used on hero headlines */
.gradient-text {
  background: linear-gradient(92deg, var(--qf-brand-1), var(--qf-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Theme toggle icon swap: sun shown in dark mode, moon in light mode */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: inline; }
.dark #theme-toggle .icon-sun { display: inline; }
.dark #theme-toggle .icon-moon { display: none; }

/* Accessible focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--qf-brand-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Subtle transition for theme switching */
body,
body * {
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

/* Mobile nav drawer slide */
#mobile-menu {
  transition: transform 200ms ease-out;
}
#mobile-menu.hidden-mobile {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
}

/* Keep images from jumping the layout before they load */
img {
  background-color: #0f172a14;
}

/* Scrollbar (optional nicety, WebKit only) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 6px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Print: avoid dark backgrounds */
@media print {
  .dark body { background: #fff; color: #000; }
}