/* LOKALE KOPIE — claude.ai/design "Capture & Scale Design System"
   (3a3ef1b2-cb49-4efa-9858-a00f83ec8d89, Stand 2026-07-11).
   1:1 gespiegelt, nicht von Hand ändern — Sync: docs/design-system.md */

/* ============================================================
   Capture & Scale — Effects
   Shadows, glows, the HUD grid, decorative textures, motion.
   The signature look: dark depth + a single precise glow.
   ============================================================ */

:root {
  /* --- Elevation shadows (dark-surface aware) ------------ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 6px 20px -6px rgba(0,0,0,0.55);
  --shadow-lg:  0 18px 48px -12px rgba(0,0,0,0.65);
  --shadow-xl:  0 30px 80px -20px rgba(0,0,0,0.7);

  /* --- Signal glows (halo around active/accent elements) - */
  --glow-lime-sm: 0 0 0 1px rgba(var(--glow-lime) / 0.35), 0 0 18px -2px rgba(var(--glow-lime) / 0.35);
  --glow-lime-md: 0 0 0 1px rgba(var(--glow-lime) / 0.45), 0 0 34px -4px rgba(var(--glow-lime) / 0.45);
  --glow-blue-sm: 0 0 0 1px rgba(var(--glow-blue) / 0.4), 0 0 22px -2px rgba(var(--glow-blue) / 0.4);
  --glow-blue-md: 0 0 40px -6px rgba(var(--glow-blue) / 0.5);
  --glow-red-sm:  0 0 0 1px rgba(var(--glow-red) / 0.4), 0 0 20px -3px rgba(var(--glow-red) / 0.35);

  /* Inner hairline "engineered edge" for glass panels */
  --edge-inset: inset 0 1px 0 rgba(255,255,255,0.05);

  /* --- Focus ring ---------------------------------------- */
  --ring: 0 0 0 3px var(--focus-ring);

  /* --- Motion -------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */

  /* --- HUD grid + texture variables ---------------------- */
  --grid-line: rgba(120, 160, 210, 0.06);  /* @kind color */
  --grid-size: 40px;   /* @kind spacing */
  --dot-color: rgba(120, 160, 210, 0.10);  /* @kind color */
}

/* ============================================================
   Reusable background utilities — the "blueprint" grounds
   ============================================================ */

/* Fine engineering grid overlay (put on a dark ground) */
.cs-grid-bg {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Dotted matrix (HUD corner texture) */
.cs-dots-bg {
  background-image: radial-gradient(var(--dot-color) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

/* Radial glow spotlight — pair with a dark base */
.cs-glow-blue {
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(var(--glow-blue) / 0.18), transparent 70%);
}
.cs-glow-lime {
  background:
    radial-gradient(50% 50% at 70% 80%, rgba(var(--glow-lime) / 0.14), transparent 70%);
}

/* Signature layered ground: base + grid + corner glows */
.cs-ground {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(80% 60% at 15% 0%, rgba(var(--glow-blue) / 0.14), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(var(--glow-lime) / 0.10), transparent 60%),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

/* Hairline top accent used on section dividers */
.cs-scanline {
  background: linear-gradient(90deg, transparent, rgba(var(--glow-lime) / 0.5), transparent);
  height: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
  @keyframes cs-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
  }
}