/* =====================================================================
   TOKENS — die einzige Datei, die du für ein Re-Design anfassen musst.
   Farben, Abstände, Radien, Schrift. Alles andere liest nur von hier.
   ===================================================================== */

:root {
  /* --- Markenfarben (aus der Design-Vorlage) ------------------------ */
  --c-mint:    #3ef0b4;   /* Neon-Grün   */
  --c-aqua:    #34e2e6;   /* Türkis      */
  --c-cyan:    #38c8ff;   /* Hellblau    */
  --c-blue:    #5b8cff;   /* Blau        */
  --c-violet:  #a877ff;   /* Lila        */
  --c-magenta: #d96bff;   /* Magenta     */

  /* --- Schiefer / Untergrund ---------------------------------------- */
  --slate-900: #070b0e;
  --slate-800: #0b1116;
  --slate-700: #111a21;
  --slate-600: #17242c;
  --slate-500: #1f313b;

  /* --- Text ---------------------------------------------------------- */
  --ink-1: #eef6f8;                        /* Überschriften        */
  --ink-2: rgba(226, 240, 245, 0.74);      /* Fließtext            */
  --ink-3: rgba(206, 226, 234, 0.50);      /* Sekundär / Labels    */

  /* --- Glas ---------------------------------------------------------- */
  --glass-bg:      rgba(18, 30, 38, 0.42);
  --glass-bg-soft: rgba(20, 34, 43, 0.28);
  --glass-line:    rgba(160, 220, 235, 0.16);
  --glass-line-hi: rgba(190, 240, 255, 0.34);
  --glass-blur:    18px;

  /* --- Verläufe ------------------------------------------------------ */
  --grad-brand:  linear-gradient(100deg, var(--c-mint), var(--c-aqua) 30%, var(--c-cyan) 52%, var(--c-blue) 70%, var(--c-violet) 88%, var(--c-magenta));
  --grad-line:   linear-gradient(90deg, transparent, var(--c-aqua), var(--c-violet), transparent);
  --grad-panel:  linear-gradient(150deg, rgba(62, 240, 180, 0.10), rgba(56, 200, 255, 0.05) 45%, rgba(168, 119, 255, 0.10));

  /* --- Glow ---------------------------------------------------------- */
  --glow-mint:   0 0 24px rgba(62, 240, 180, 0.35);
  --glow-cyan:   0 0 26px rgba(56, 200, 255, 0.35);
  --glow-violet: 0 0 28px rgba(168, 119, 255, 0.35);

  /* --- Foto-Hook -----------------------------------------------------
     Später ein echtes Moselschiefer-Foto? Nur diese Zeile ändern:
     --bg-photo: url("../assets/schiefer.jpg");
     Der prozedurale Effekt bleibt darüber liegen.                      */
  --bg-photo: none;
  --bg-photo-opacity: 0.28;

  /* --- Typografie — systemnah, keine externen Fonts (DSGVO + Speed) -- */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;

  --fs-hero:    clamp(1.95rem, 6.2vw, 4.6rem);
  --fs-h2:      clamp(1.7rem, 3.4vw, 2.7rem);
  --fs-h3:      clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-lead:    clamp(1.02rem, 1.4vw, 1.18rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   0.72rem;

  /* --- Raster & Abstände --------------------------------------------- */
  --wrap:     1220px;
  --wrap-narrow: 760px;
  --gutter:   clamp(18px, 4vw, 40px);
  --sec-pad:  clamp(72px, 9vw, 140px);
  --gap:      clamp(16px, 2vw, 26px);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.75, 0.28, 1);
  --dur:  0.5s;
}

/* Optionales helles Schema — die Vorlage ist bewusst dunkel,
   dieser Block existiert nur als Ausbaupfad. Aktivieren über
   <html data-theme="light">. */
:root[data-theme="light"] {
  --slate-900: #eef2f4;
  --slate-800: #f5f8f9;
  --slate-700: #ffffff;
  --ink-1: #0b1116;
  --ink-2: rgba(11, 17, 22, 0.72);
  --ink-3: rgba(11, 17, 22, 0.52);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-line: rgba(11, 17, 22, 0.10);
}