/* SC Mining Hub – Core CSS
   Variablen, Reset, Typografie, Spacing-Skala, Body-Effekte
   ================================================================ */

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Hintergründe */
  --bg0: #080a0d;
  --bg1: #0c0f14;
  --bg2: #111520;
  --bg3: #171c28;
  --bg4: #1e2535;

  /* Akzentfarben */
  --amber:     #e8a020;
  --amber2:    #ffbe44;
  --amber-dim: rgba(232, 160, 32, 0.12);

  /* Status-Farben */
  --green: #30c878;
  --red:   #e03030;
  --blue:  #3090e0;
  --cyan:  #20c8d8;

  /* Text */
  --text:  #a0b0cc;
  --text2: #c8d8f0;
  --text3: #e8f0ff;

  /* Deaktiviert / Placeholder */
  --dim: #4a5870;

  /* Rahmen */
  --border:  rgba(232, 160, 32, 0.18);
  --border2: rgba(232, 160, 32, 0.35);

  /* ── Schriftgrößen-Skala ────────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* ── Spacing-Skala ─────────────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ── Sonstiges ─────────────────────────────────────────── */
  --radius:   6px;
  --radius-lg: 10px;
  --transition: 180ms ease;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--amber);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--amber2);
}

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

/* ── Body ─────────────────────────────────────────────────────── */
body {
  background-color: var(--bg0);
  color: var(--text);
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Ambient Radial Glow (hinter allem) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232, 160, 32, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(48, 144, 224, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Scan-Line Overlay / CRT-Effekt */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Alle direkten Body-Kinder über den Pseudo-Elementen */
body > * {
  position: relative;
  z-index: 1;
}

/* ── Typografie ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  color: var(--text3);
  line-height: 1.2;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

p {
  line-height: 1.65;
}

code,
.mono {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9em;
  color: var(--amber2);
}

/* ── Layout-Hilfklassen ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--s4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--s5); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s6); } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Fokus-Ring global ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}