/* =====================================================================
   css/theme.css  ·  DAS FARBSCHEMA – die zentrale Stelle für alles Optische
   ---------------------------------------------------------------------
   Hier stehen alle Farben, Schriften, Abstände und Effekt-Stärken als
   "CSS-Variablen". Eine Variable wird so festgelegt …

       --neon-cyan: #00f0ff;

   … und überall sonst so benutzt:

       color: var(--neon-cyan);

   Änderst du hier einen Wert, ändert er sich auf der GANZEN Seite.
   Probier's aus: Setz --neon-magenta auf #ff6a00 (Orange) und lade neu.
   ===================================================================== */


/* ---------- 1. SCHRIFTEN LADEN (Google Fonts) ------------------------
   Andere Schrift gewünscht? Auf https://fonts.google.com aussuchen,
   diese Adresse austauschen und unten bei "6. SCHRIFTEN" eintragen. */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap");


/* ---------- 2. WEICHE FARBWECHSEL BEIM SCROLLEN ----------------------
   Damit der Hintergrund beim Scrollen sanft die Farbe wechselt, sagen
   wir dem Browser, welche Art Wert diese Variablen enthalten.
   (Hier musst du nichts ändern. Ältere Browser wechseln ohne Übergang.) */
@property --scene   { syntax: "<color>";      inherits: true; initial-value: #00f0ff; }
@property --scene-x { syntax: "<percentage>"; inherits: true; initial-value: 18%; }
@property --scene-y { syntax: "<percentage>"; inherits: true; initial-value: 12%; }


:root {
  color-scheme: dark;

  /* ---------- 3. NEONFARBEN ---------- */
  --neon-cyan:    #00f0ff;
  --neon-magenta: #ff2bd6;
  --neon-yellow:  #fcee0a;
  --neon-violet:  #b26bff;
  --neon-green:   #3dff9a;
  --neon-red:     #ff3b5c;

  /* ---------- 4. FLÄCHEN & TEXT ---------- */
  --bg-deep:      #05050b;                   /* Seitenhintergrund (fast schwarz) */
  --bg-panel:     #0a0a18;                   /* Hintergrund der Kacheln */
  --bg-input:     rgba(255, 255, 255, 0.04); /* Eingabefelder */
  --text:         #e6edff;                   /* Haupttext */
  --text-muted:   #8f9ac0;                   /* Nebentext, Beschriftungen */
  --text-on-neon: #05050b;                   /* Text auf leuchtenden Flächen (Knöpfe) */

  /* ---------- 5. ROLLEN: welche Farbe wofür? ---------- */
  --accent:        var(--neon-cyan);   /* Standard-Akzent (jede Kachel kann ihn ändern) */
  --color-focus:   var(--neon-yellow); /* Rahmen, wenn man mit der Tastatur navigiert */
  --color-danger:  var(--neon-red);    /* Löschen */
  --color-success: var(--neon-green);  /* Erledigt */

  /* ---------- 6. SCHRIFTEN ---------- */
  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;         /* Überschriften */
  --font-body:    "Chakra Petch", "Segoe UI", system-ui, sans-serif;     /* Fließtext */
  --font-mono:    "Share Tech Mono", Consolas, "Courier New", monospace; /* Terminal-Optik */

  /* Schriftgrößen – clamp(min, ideal, max) wächst mit der Bildschirmbreite */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.2rem;
  --text-xl:  1.5rem;
  --text-2xl: clamp(1.6rem, 3.2vw, 2.6rem);
  --text-3xl: clamp(2.4rem, 8vw, 5.8rem);
  --line-height: 1.55;

  /* ---------- 7. 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: 5rem;
  --page-gutter:   clamp(1rem, 4vw, 3rem);    /* Rand links und rechts */
  --content-width: 1240px;                     /* maximale Breite des Inhalts */
  --grid-gap:      clamp(0.9rem, 2vw, 1.4rem); /* Abstand zwischen den Kacheln */

  /* ---------- 8. FORMEN ---------- */
  --cut:          16px; /* abgeschnittene Ecken bei Kacheln */
  --cut-sm:       8px;  /* abgeschnittene Ecken bei Knöpfen */
  --border-width: 1px;  /* Rahmenstärke der Kacheln */

  /* ---------- 9. LEUCHTEN & HINTERGRUND ---------- */
  --glow-near:  8px;          /* enger Leuchtschein */
  --glow-far:   28px;         /* weiter Leuchtschein */
  --glow-alpha: 60%;          /* Stärke des Leuchtens (0% = aus) */
  --grid-size:  46px;         /* Kästchengröße des Rasters */
  --pattern-opacity:  0.14;   /* Sichtbarkeit von Raster, Linien und Punkten */
  --scanline-opacity: 0.16;   /* Stärke der Bildschirm-Streifen (0 = aus) */

  /* ---------- 10. BEWEGUNG ---------- */
  --dur-fast: 160ms;
  --dur-med:  380ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --move-distance:    44px; /* wie weit Elemente beim Hereingleiten wandern */
  --scene-transition: 1.2s; /* Dauer des Hintergrund-Farbwechsels */

  /* ---------- 11. EBENEN (was liegt über was?) ---------- */
  --z-nav:       40;
  --z-scanlines: 60;
  --z-toast:     70;
  --z-meter:     80;
}


/* ---------- 12. AKZENTFARBEN ZUM AUSWÄHLEN ---------------------------
   Kacheln und Abschnitte bekommen data-accent="…". Hier steht, welche
   Farbe welcher Name bedeutet. Eigene Farbe? Einfach eine Zeile ergänzen:
       [data-accent="orange"] { --accent: #ff8a00; }                    */
[data-accent="cyan"]    { --accent: var(--neon-cyan); }
[data-accent="magenta"] { --accent: var(--neon-magenta); }
[data-accent="yellow"]  { --accent: var(--neon-yellow); }
[data-accent="violet"]  { --accent: var(--neon-violet); }
[data-accent="green"]   { --accent: var(--neon-green); }
[data-accent="red"]     { --accent: var(--neon-red); }


/* ---------- 13. HINTERGRUND JE ABSCHNITT -----------------------------
   Beim Scrollen übernimmt <body> die Farbe des aktuellen Abschnitts.
   --scene-x / --scene-y = wo der farbige Lichtschein sitzt.            */
body                        { --scene: var(--accent); }
body[data-accent="cyan"]    { --scene-x: 18%; --scene-y: 12%; }
body[data-accent="magenta"] { --scene-x: 82%; --scene-y: 25%; }
body[data-accent="yellow"]  { --scene-x: 22%; --scene-y: 80%; }
body[data-accent="violet"]  { --scene-x: 78%; --scene-y: 72%; }
body[data-accent="green"]   { --scene-x: 50%; --scene-y: 14%; }