/* ============================================================
   CODLAB GAMING — Design tokens & reset
   Gaming-tactical premium · Gunmetal + neon-lime
   ============================================================ */

:root {
  /* —— Color tokens —————————————————————————————————— */
  --cg-bg:            #0a0c0d;
  --cg-bg-deep:       #050606;
  --cg-surface:       #1a1d1f;
  --cg-surface-lift:  #252A2C;
  --cg-surface-hi:    #2E3437;
  --cg-line:          #2E3437;
  --cg-line-lo:       #1c2022;

  --cg-ink:           #F5F4EE;
  --cg-ink-mute:      #9CA29F;
  --cg-ink-low:       #8E9499;   /* WCAG AA: ~4.5:1 auf #0a0c0d (vorher #5A6064 ~2.8:1) */

  --cg-lime:          #CBFE1C;
  --cg-lime-bright:   #E1FF55;
  --cg-lime-dim:      #7A9610;
  --cg-lime-glow:     rgba(203, 254, 28, 0.22);

  --cg-warm:          #E6A559;     /* Regensburg afternoon */
  --cg-wine:          #722F37;     /* danger / alert subtle */
  --cg-blood:         #FF3B3B;     /* destructive */

  /* —— Type tokens —————————————————————————————————— */
  --cg-display: "Anton", "Arial Black", sans-serif;
  --cg-ui:      "Saira Condensed", "Inter", system-ui, sans-serif;
  --cg-body:    "Manrope", "Inter", system-ui, sans-serif;
  --cg-mono:    "JetBrains Mono", ui-monospace, monospace;

  --cg-fs-mono:    0.72rem;      /* technical metadata */
  --cg-fs-tag:     0.78rem;      /* pill labels */
  --cg-fs-base:    1rem;
  --cg-fs-lead:    1.18rem;
  --cg-fs-h4:      1.45rem;
  --cg-fs-h3:      2.1rem;
  --cg-fs-h2:      clamp(2.4rem, 4.2vw, 4.4rem);
  --cg-fs-h1:      clamp(3.4rem, 8vw, 8rem);
  --cg-fs-hero:    clamp(4.2rem, 11vw, 11rem);

  /* —— Spacing tokens ——————————————————————————————— */
  --cg-gutter:     clamp(1.25rem, 2vw, 2rem);
  --cg-section-y:  clamp(5rem, 10vw, 8rem);
  --cg-radius:     2px;            /* sharp, tactical */
  --cg-radius-md:  4px;
  --cg-radius-lg:  8px;

  /* —— Motion tokens ——————————————————————————————— */
  --cg-ease-out:   cubic-bezier(.16,1,.3,1);
  --cg-ease-in:    cubic-bezier(.7,0,.84,0);
  --cg-ease-snap:  cubic-bezier(.5, 1.6, .4, 1);
  --cg-d-fast:     180ms;
  --cg-d-base:     320ms;
  --cg-d-slow:     680ms;

  /* —— Shadow / glow ——————————————————————————————— */
  --cg-glow-lime:  0 0 24px var(--cg-lime-glow), 0 0 1px var(--cg-lime);
  --cg-shadow-lift: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.6);

  /* —— Clip paths (tactical hex-cuts) ———————————————— */
  --cg-clip-tag: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --cg-clip-btn: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --cg-clip-frame: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}

/* ============================================================
   Reset · gentle
   ============================================================ */

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

html {
  background: var(--cg-bg-deep);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--cg-body);
  font-size: var(--cg-fs-base);
  line-height: 1.55;
  color: var(--cg-ink);
  background: var(--cg-bg);
  background-image:
    radial-gradient(ellipse at top, rgba(203,254,28,.04) 0%, transparent 60%),
    linear-gradient(180deg, #0c0e0f 0%, #0a0c0d 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Subtle workshop-dust grain overlay (whole page) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection {
  background: var(--cg-lime);
  color: var(--cg-bg-deep);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cg-bg-deep); }
::-webkit-scrollbar-thumb {
  background: var(--cg-surface-lift);
  border: 2px solid var(--cg-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--cg-lime-dim); }

/* Focus ring — tactical */
:focus-visible {
  outline: 2px solid var(--cg-lime);
  outline-offset: 3px;
}

/* ============================================================
   Typography classes
   ============================================================ */

.cg-display {
  font-family: var(--cg-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: .85;
  text-transform: uppercase;
  color: var(--cg-ink);
}

.cg-ui {
  font-family: var(--cg-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cg-mono {
  font-family: var(--cg-mono);
  font-size: var(--cg-fs-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cg-ink-mute);
}

.cg-lead {
  font-size: var(--cg-fs-lead);
  line-height: 1.55;
  color: var(--cg-ink);
  max-width: 60ch;
}

.cg-lime { color: var(--cg-lime); }
.cg-text-mute { color: var(--cg-ink-mute); }

/* ============================================================
   Layout containers
   ============================================================ */

.cg-container {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--cg-gutter);
}

.cg-section {
  padding-block: var(--cg-section-y);
  position: relative;
}

/* 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;
  }
}

/* Skip-link (a11y): visually hidden until focused via keyboard */
.cg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--cg-accent, #CBFE1C);
  color: #0a0c0d;
  padding: .65rem 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.cg-skip-link:focus { left: 0; outline: 2px solid #0a0c0d; }
main.cg-main:focus { outline: none; }