/* =Base reset, typography, layout primitives, accessibility utilities */

/* =Root tokens (non-color). Color/theme vars come from theme.css */
:root{
  --container-width: 90%;
  --container-max-width: 1200px;
  --header-height: 70px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font-heading: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* =Modern reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html{
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* =Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =Page layout base */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* prevent horizontal scroll */

  font-family: var(--font-body);
  line-height: 1.7;

  /* Fallbacks until theme.css loads */
  background-color: var(--bg-color, #0d0d1a);
  color: var(--text-color, #c0c0ff);

  transition: background-color .3s ease, color .3s ease;
}

/* Hide global scrollbars but keep scrolling active (Windows/Firefox/WebKit) */
html, body{
  -ms-overflow-style: none;     /* IE/old Edge */
  scrollbar-width: none;        /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none;                /* Chrome/Safari/WebKit */
}

/* Keep header fixed space accounted */
#page-content{
  flex-grow: 1;
  padding-top: calc(var(--header-height) + var(--safe-top));
}

/* =Containers */
.container{
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* =Typography */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  line-height: 1.25;
  margin-bottom: .8em;
  color: var(--accent-primary, #00f0ff);
}
p{ margin-bottom: 1em; }
strong, b{ font-weight: 700; }
em, i{ font-style: italic; }

/* =Links */
a{
  color: var(--accent-primary, #00f0ff);
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}
a:hover{
  color: var(--accent-secondary, #ff00ff);
  text-shadow: 0 0 8px var(--accent-glow, rgba(0,240,255,.4));
}

/* =Lists */
ul, ol{ padding-left: 1.2rem; margin-bottom: 1rem; }
li{ margin: .3rem 0; }

/* =Media elements */
img, svg, video, canvas, audio, iframe, embed, object{
  display: block;
  max-width: 100%;
}
img{ height: auto; }

/* =Forms (basic) */
button, input, select, textarea{
  font: inherit;
  color: inherit;
}
button{ cursor: pointer; }
:disabled{ cursor: not-allowed; }

/* =Selection */
::selection{
  background: rgba(0,240,255,.25);
  color: inherit;
}

/* =Focus styles (accessible, only when keyboard focuses) */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--accent-primary, #00f0ff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =Sections spacing */
.section-padding{ padding: 80px 0; }
.section-padding-sm{ padding: 60px 0; }

.section-header{
  text-align: center;
  margin-bottom: 60px;
}
.section-title{
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 15px;
}
.section-subtitle{
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  opacity: .85;
}

/* =Utilities */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }
.mt-1{ margin-top: .25rem !important; }
.mt-2{ margin-top: .5rem !important; }
.mt-3{ margin-top: 1rem !important; }
.mb-1{ margin-bottom: .25rem !important; }
.mb-2{ margin-bottom: .5rem !important; }
.mb-3{ margin-bottom: 1rem !important; }

/* =Skip link for a11y */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  position: fixed;
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  padding: .6rem .9rem;
  z-index: 10000;
  color: #fff;
  background: rgba(0,0,0,.7);
  border-radius: 6px;
  outline: 2px solid var(--accent-primary, #00f0ff);
}

/* =Anchor offset for fixed/sticky header */
[id]{ scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 16px); }

/* =Mobile tweaks */
@media (max-width: 480px){
  .section-padding{ padding: 60px 0; }
  .section-padding-sm{ padding: 48px 0; }
}

/* =Preloader helper (main preloader styles in components.css) */
.hud-noscroll{ overflow: hidden; }

/* =Utility: hide scrollbar on a specific scrollable container (optional) */
.hide-scrollbar{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar{ display: none; }

/* =Overrides: header offset on narrower screens */
@media (max-width: 992px){
  #page-content{ padding-top: var(--safe-top); }
}