/* ============================================================
   BASE.CSS — Reset, CSS Variables, Typography
   ============================================================ */

/* ── LOCAL FONTS (@font-face) ─────────────────────────────
   Alle Fonts liegen in /fonts/ – kein externer Request.
   font-display: swap → Text bleibt lesbar während Font lädt.
   ────────────────────────────────────────────────────────── */

/* Display Font: Iceberg – für Überschriften & Logo */
@font-face {
  font-family: 'Iceberg';
  src: url('../fonts/Iceberg-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Mono Font: SyneMono – für Body, Labels, Inputs */
@font-face {
  font-family: 'SyneMono';
  src: url('../fonts/SyneMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Weitere verfügbare Fonts (bei Bedarf aktivieren) */

@font-face {
  font-family: 'Arbutus';
  src: url('../fonts/Arbutus-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bit';
  src: url('../fonts/bit.woff2') format('woff2'),
       url('../fonts/Bit.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eater';
  src: url('../fonts/Eater-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FleurDeLeah';
  src: url('../fonts/FleurDeLeah-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Honk';
  src: url('../fonts/Honk.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LavishlyYours';
  src: url('../fonts/LavishlyYours-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nosifer';
  src: url('../fonts/Nosifer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pompiere';
  src: url('../fonts/Pompiere-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RubikDirt';
  src: url('../fonts/RubikDirt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RubikPuddles';
  src: url('../fonts/RubikPuddles-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sancreek';
  src: url('../fonts/Sancreek-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Colors */
  --bg:          #0a0a0f;
  --surface:     #12121a;
  --surface-2:   #1a1a26;
  --border:      #2a2a3a;
  --accent:      #00e5ff;
  --accent-2:    #ff3cac;
  --accent-3:    #ffe600;
  --text:        #e8e8f0;
  --text-muted:  #6a6a8a;

  /* Typography */
  --font-display: 'Iceberg', sans-serif;
  --font-mono:    'SyneMono', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 0.2s ease;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font-mono);
}

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

/* Scrollbar */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: var(--surface-2); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: var(--radius-full); }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}