/*
  ================================================================
  variables.css — Design Tokens
  ================================================================
  Alle Farben, Abstände und Schriften an einem Ort.

  Was ist ein "Design Token"?
  Ein Design Token ist ein benannter Wert für eine visuelle
  Entscheidung. Statt überall "#0a0b1a" zu schreiben, geben wir
  dieser Farbe einen Namen: --color-bg.

  Vorteile:
  - Änderst du --color-accent an einer Stelle, ändert sich
    die Farbe ÜBERALL auf der Seite.
  - Der Code wird lesbar: "var(--color-accent)" sagt mehr
    als "#e2ff5d".
  - Theming (Light/Dark Mode) wird einfach: nur die Variablen
    in :root { } wechseln.

  :root ist das HTML-Element ganz oben — Variablen die hier
  definiert sind, sind GLOBAL auf der ganzen Seite erreichbar.
  ================================================================
*/

:root {

  /* ---------------------------------------------------------------
     FARBEN — Hintergrund & Flächen
  --------------------------------------------------------------- */
  --color-bg:           #070818;  /* Tiefstes Schwarz-Blau (Weltall) */
  --color-surface-1:    #0d0f24;  /* Karten-Hintergrund */
  --color-surface-2:    #13163a;  /* Hover / aktive Flächen */
  --color-nebula-1:     #1a0a2e;  /* Nebel-Lila (für Hintergrundeffekte) */
  --color-nebula-2:     #0a1a3a;  /* Nebel-Blau */

  /* ---------------------------------------------------------------
     FARBEN — Akzente
     Eine Hauptfarbe (Akzent) + eine sekundäre.
     Wir nutzen ein helles Hellblau/Cyan als "Weltraum-Technik"-Farbe.
  --------------------------------------------------------------- */
  --color-accent:       #5eead4;  /* Teal/Cyan — Hauptakzent */
  --color-accent-glow:  rgba(94, 234, 212, 0.15); /* Leuchten-Version */
  --color-accent-2:     #818cf8;  /* Violett — sekundär */
  --color-accent-2-glow: rgba(129, 140, 248, 0.15);

  /* ---------------------------------------------------------------
     FARBEN — Text
  --------------------------------------------------------------- */
  --color-text-primary:   #f0f4ff;   /* Haupt-Text: fast weiß mit blauem Stich */
  --color-text-secondary: #8892b0;   /* Untertitel, Labels */
  --color-text-muted:     #4a5580;   /* Gedämpft (Timestamps, Hinweise) */

  /* ---------------------------------------------------------------
     FARBEN — Ränder & Trennlinien
     rgba() mit niedrigem Alpha (a) = halbtransparent
  --------------------------------------------------------------- */
  --color-border:         rgba(255, 255, 255, 0.06);
  --color-border-hover:   rgba(94, 234, 212, 0.2);

  /* ---------------------------------------------------------------
     TYPOGRAFIE
     wir importieren Schriften in index.html.
     Hier benennen wir sie nur für die Wiederverwendung.
  --------------------------------------------------------------- */
  --font-display: 'Syne', sans-serif;       /* Überschriften — breit, technisch */
  --font-body:    'IBM Plex Sans', sans-serif; /* Fließtext — gut lesbar */
  --font-mono:    'IBM Plex Mono', monospace;  /* Labels, Code */

  /* ---------------------------------------------------------------
     ABSTÄNDE — Spacing Scale
     Konsistente Abstände machen das Layout harmonisch.
     Alle Werte sind Vielfache von 4px (4px Grid).
  --------------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ---------------------------------------------------------------
     RADII — Abrundungen
  --------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;  /* Pill-Form */

  /* ---------------------------------------------------------------
     TRANSITIONS — Übergänge
     Einheitliche Geschwindigkeiten für alle Animationen.
  --------------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1); /* Ease-Out-Expo */

  /* ---------------------------------------------------------------
     SCHATTEN
  --------------------------------------------------------------- */
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent:  0 0 40px rgba(94, 234, 212, 0.15);
  --shadow-glow-accent2: 0 0 40px rgba(129, 140, 248, 0.15);

  /* ---------------------------------------------------------------
     LAYOUT
  --------------------------------------------------------------- */
  --max-width:     1120px;  /* Maximale Breite des Inhalts */
  --nav-height:    72px;    /* Höhe der Navigation */
}