/* =========================================================
   VERIFY CSS SYSTEM
   Datei: /assets/css/tokens/base.css

   INHALT
   01) Design Tokens
   02) Reset / Basis
   03) Body / Global Background
   04) Medien / Formulare
   05) Globales Layout
   06) Basis-Typografie
   ========================================================= */


/* =========================================================
   01) DESIGN TOKENS
   Zentrale Farben, Schatten, Radien, Schriften, Maße
   Nur globale Systemwerte – keine Komponenten
   ========================================================= */

:root{
  --bg-1:#07111f;
  --bg-2:#0a1930;
  --bg-3:#132746;

  --panel:rgba(255,255,255,.12);
  --panel-strong:rgba(255,255,255,.18);
  --panel-soft:rgba(255,255,255,.08);

  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.28);

  --text:#eef6ff;
  --muted:#b9c8da;
  --soft:#8da3bf;

  --cyan:#7ef3ff;
  --cyan-2:#4fd8ff;
  --blue:#7aa7ff;

  --gold:#ffd76a;
  --gold-2:#ffbf3a;
  --gold-glow:rgba(255,215,106,.40);

  --green:#76ffb7;

  --shadow-1:0 20px 60px rgba(0,0,0,.28);
  --shadow-2:0 10px 24px rgba(0,0,0,.22);

  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --shell:1280px;
  --header-h:88px;
  --blur:20px;

  --font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:Orbitron,Inter,system-ui,sans-serif;
}


/* =========================================================
   02) RESET / BASIS
   Browser-Normalisierung und Grundverhalten
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-width:320px;
  line-height:1.55;
  overflow-x:hidden;
}

main{
  position:relative;
  z-index:1;
}


/* =========================================================
   03) BODY / GLOBAL BACKGROUND
   Globale Seitenatmosphäre und Overlay-Struktur
   ========================================================= */

body{
  color:var(--text);
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at 15% 20%, rgba(126,243,255,.18), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(255,215,106,.12), transparent 24%),
    radial-gradient(circle at 50% 75%, rgba(122,167,255,.12), transparent 34%),
    linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:screen;
  background:
    linear-gradient(rgba(255,255,255,.028), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.028) 0,
      rgba(255,255,255,.028) 1px,
      transparent 1px,
      transparent 5px
    );
}


/* =========================================================
   04) MEDIEN / FORMULARE
   Basisverhalten für Standardelemente
   ========================================================= */

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
}


/* =========================================================
   05) GLOBALES LAYOUT
   Seitenbreite, Shell, Hauptabstände
   ========================================================= */

.shell{
  width:min(calc(100% - 32px), var(--shell));
  margin-inline:auto;
}

.verify-home{
  padding:
    clamp(22px, 4vw, 36px)
    0
    clamp(72px, 8vw, 120px);
}

.verify-project-page{
  display:grid;
  gap:28px;
}


/* =========================================================
   06) BASIS-TYPOGRAFIE
   Nur generelle Headings und Fließtext
   Komponenten-spezifische Typografie später separat
   ========================================================= */

h1,h2,h3,h4{
  margin:0 0 .6em;
  line-height:1.08;
  letter-spacing:-.02em;
}

h1,h2{
  font-family:var(--font-display);
}

h1{
  font-size:clamp(2.2rem, 5vw, 4.8rem);
}

h2{
  font-size:clamp(1.55rem, 3vw, 2.5rem);
}

h3{
  font-size:clamp(1.06rem, 1.6vw, 1.34rem);
}

p{
  margin:0 0 1rem;
  color:var(--muted);
}


/* =========================================================
   07) BASIS-RESPONSIVE
   Nur globale Grundwerte, keine Komponenten
   ========================================================= */

@media (max-width: 760px){
  :root{
    --radius-xl:24px;
    --radius-lg:20px;
  }

  .shell{
    width:min(calc(100% - 20px), var(--shell));
  }

  .verify-home{
    padding-bottom:76px;
  }
}


/* =========================================================
   08) ACCESSIBILITY / REDUCED MOTION
   Globales Motion-Fallback
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}