/* ============================================================
   tokens.css — Designsystem (Custom Properties) + Schriften
   Dunkel & immersiv. Akzent: Cyan -> Violett.
   Farben/Schriften hier zentral ändern -> wirkt überall.
   ============================================================ */

:root {
  /* --- Hintergründe & Flächen --- */
  --color-bg: #0a0b0f;          /* Fast-Schwarz, leicht bläulich */
  --color-surface: #12141c;     /* Karten / Nav */
  --color-surface-2: #1b1e29;   /* erhöht / Hover */
  --color-border: #2a2e3c;

  /* --- Text --- */
  --color-text: #f2f3f7;
  --color-text-muted: #a4abbd;

  /* --- Akzent (freundliches Gelb/Orange) --- */
  --color-accent: #ffb02e;          /* warmes Bernstein/Gold, primär */
  --color-accent-2: #ff7d29;        /* Orange, sekundär (Verläufe) */
  --color-accent-contrast: #241a00; /* dunkler Text AUF Akzentflächen */
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));

  --focus-ring: 2px solid var(--color-accent);

  /* --- Typografie --- */
  /* "Space Grotesk"/"Inter" werden genutzt, falls vorhanden (siehe @font-face
     unten zum Selbst-Hosten). Sonst sauberer System-Fallback. */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-900: clamp(2.5rem, 6vw, 5rem);      /* Hero */
  --fs-700: clamp(1.75rem, 3.5vw, 2.75rem);/* Sektions-Überschrift */
  --fs-600: clamp(1.4rem, 2.5vw, 1.9rem);  /* Karten-/Projekt-Titel */
  --fs-500: clamp(1.15rem, 2vw, 1.4rem);
  --fs-400: 1rem;
  --fs-300: 0.875rem;
  --fs-200: 0.78rem;

  --lh-tight: 1.12;
  --lh-body: 1.65;

  /* --- Abstände --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Radius / Schatten / Layout --- */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --maxw: 1200px;     /* Inhaltsbreite */
  --maxw-text: 68ch;  /* lesbare Textbreite */

  /* --- Bewegung --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.4s;
  --dur-fast: 0.2s;

  /* --- z-index Ebenen --- */
  --z-nav: 100;
  --z-overlay: 200;
}

/* ============================================================
   Schriften selbst hosten (optional, empfohlen für DSGVO/Portabilität)
   Anleitung:
   1) woff2-Dateien von fonts.google.com (Space Grotesk, Inter) o.ä.
      herunterladen und in assets/fonts/ ablegen.
   2) Den folgenden Block ENT-kommentieren.
   Solange die Dateien fehlen, greift automatisch der System-Fallback oben
   (keine fehlerhaften Netzwerk-Requests).
   ============================================================ */
/*
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
*/