/* ==========================================================================
   css/base.css — Dritrez Solutions Global Resets & Semantic Defaults
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@600;700;800;900&family=Fira+Code:wght@400;500&display=swap');

/* ─── Universal Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* ─── Root Defaults ───────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  line-height:      1.7;
  color:            var(--text-main);
  background-color: var(--dark-bg);
  overflow-x:       hidden;
  min-height:       100vh;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--dark-surface); }
::-webkit-scrollbar-thumb  {
  background:    linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: var(--radius-full);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--dark-surface);
}

/* ─── Selection ───────────────────────────────────────────────────────── */
::selection {
  background: rgba(0, 243, 255, 0.18);
  color: #fff;
}

/* ─── Typography — Headings ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-heading);
  font-weight:   700;
  line-height:   1.2;
  color:         var(--text-white);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-4);
}

h1 {
  font-size:      var(--text-6xl);
  font-weight:    900;
  letter-spacing: 1px;
  line-height:    1.05;
}

h2 {
  font-size:      var(--text-5xl);
  font-weight:    800;
  letter-spacing: 0.75px;
  line-height:    1.1;
}

h3 {
  font-size:      var(--text-3xl);
  font-weight:    700;
  line-height:    1.2;
}

h4 {
  font-size:      var(--text-2xl);
  font-weight:    600;
  line-height:    1.3;
}

h5 {
  font-size:      var(--text-xl);
  font-weight:    600;
}

h6 {
  font-size:      var(--text-lg);
  font-weight:    500;
}

/* ─── Typography — Body ───────────────────────────────────────────────── */
p {
  font-size:     var(--text-base);
  line-height:   1.75;
  color:         var(--text-muted);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

p.lead {
  font-size:   var(--text-lg);
  line-height: 1.7;
  color:       var(--text-main);
}

/* ─── Links ───────────────────────────────────────────────────────────── */
a {
  color:           var(--primary);
  text-decoration: none;
  transition:      color var(--transition-base);
}

a:hover {
  color: #fff;
}

a:focus-visible {
  outline:        2px solid var(--primary);
  outline-offset: 4px;
  border-radius:  var(--radius-xs);
}

/* ─── Lists ───────────────────────────────────────────────────────────── */
ul,
ol {
  list-style: none;
}

/* ─── Media ───────────────────────────────────────────────────────────── */
img,
picture,
video,
canvas,
svg {
  display:   block;
  max-width: 100%;
}

/* ─── Forms ───────────────────────────────────────────────────────────── */
input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ─── Misc Semantic ───────────────────────────────────────────────────── */
strong, b     { color: var(--text-white); font-weight: 600; }
em            { color: var(--primary); font-style: normal; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; color: var(--primary); }
blockquote    { border-left: 3px solid var(--primary); padding-left: var(--space-6); font-style: italic; color: var(--text-muted); }
hr            { border: none; border-top: 1px solid var(--glass-border); margin: var(--space-10) 0; }

/* ─── Utility: Text ───────────────────────────────────────────────────── */
.text-gradient {
  background:              linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.text-gradient-warm {
  background:              linear-gradient(135deg, var(--accent-warm) 0%, var(--error) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--primary); }
.text-muted   { color: var(--text-muted); }
.text-white   { color: var(--text-white); }
.text-mono    { font-family: var(--font-mono); }

/* ─── Utility: Spacing ────────────────────────────────────────────────── */
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }

/* ─── Utility: Display ────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Scroll Reveal Animations ────────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(32px);
  transition: opacity var(--transition-spring), transform var(--transition-spring);
  will-change: opacity, transform;
}

.reveal.active  { opacity: 1; transform: translateY(0); }

.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px);  }
.reveal.from-left.active,
.reveal.from-right.active { transform: translateX(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ─── Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }

  .reveal {
    opacity:   1;
    transform: none;
  }
}