/**
 * @file src/ui/tokens/glass.css
 * @description Glass-Kachel-Design-System-Extrakt für die audics-Landing-Page.
 *
 * Herkunft: 1:1-Extrakt aus audics-suite_main (Datum: 2026-07-13):
 * - src/ui/tokens/component.css          (--surface-*, --sonic-surface-* Tokens)
 * - src/ui/tokens/effects.css             (--glass-* Glassmorphism-Basiswerte, beide Themes)
 * - src/ui/composites/glass-surface.css   (.glass-surface + .glass-surface--tile)
 *
 * Die Landing-Page ist ein eigenes Repo ohne Build-Sharing mit audics-suite —
 * diese Datei ist eine bewusste Kopie, keine geteilte Quelle. Bei
 * Design-System-Änderungen an den Glass-/Sonic-Surface-Tokens in audics-suite
 * muss diese Datei manuell neu extrahiert werden.
 *
 * Nur der "tile"-Anteil des Design-Systems ist übernommen: die Landing
 * braucht keine panel/hud/row-Varianten und keine data-state/data-interactive/
 * accented/selection-ring-Zusätze — bewusst schlank gehalten.
 *
 * Self-contained: jede hier referenzierte var() ist entweder in
 * primitive.css, semantic.css oder hier selbst definiert (siehe
 * Verify-Script im Task-Report).
 */

/* ==========================================================================
   GLASSMORPHISM BASISWERTE
   Quelle: audics-suite src/ui/tokens/effects.css
   ========================================================================== */

:root {
  /** Blur für Content-Cards (Glass-Kacheln) */
  --glass-blur: 8px;

  /** Farbsättigung für Liquid Glass */
  --glass-saturation: 150%;

  /** Solider Fallback für reduzierte Transparenz oder fehlenden Blur-Support */
  --glass-backdrop-fallback-bg: rgba(240, 240, 240, 0.85);

  /** Subtle-Glass-Hintergrund (Kacheln auf getöntem Hintergrund) */
  --glass-bg-subtle: rgba(255, 255, 255, 0.55);
  --glass-bg-subtle-hover: rgba(255, 255, 255, 0.65);

  /** Reflex-Multiplikatoren für Liquid Glass (Apple-Technik) */
  --glass-reflex-light: 0.5;
  --glass-reflex-dark: 0.5;

  /** Weichzeichnung der Reflex-Kanten (0px = scharf, 2px = weich) */
  --glass-reflex-blur: 2px;
}

[theme="dark"] {
  --glass-backdrop-fallback-bg: rgba(30, 30, 30, 0.82);
  --glass-bg-subtle: rgba(255, 255, 255, 0.08);
  --glass-bg-subtle-hover: rgba(255, 255, 255, 0.14);
  --glass-reflex-light: 0.3;
  --glass-reflex-dark: 2;
}

/* ==========================================================================
   SURFACE / SONIC-SURFACE MAPPING (nur tile-Variante)
   Quelle: audics-suite src/ui/tokens/component.css
   ========================================================================== */

:root {
  --surface-radius: var(--rounded);
  --surface-glass-blur: var(--glass-blur);
  --surface-glass-saturation: var(--glass-saturation);
  --surface-glass-bg-subtle: var(--glass-bg-subtle);
  --surface-glass-bg-subtle-hover: var(--glass-bg-subtle-hover);

  /* Liquid Glass Reflex Multipliers */
  --surface-glass-reflex-light: var(--glass-reflex-light);
  --surface-glass-reflex-dark: var(--glass-reflex-dark);
  --surface-glass-reflex-blur: var(--glass-reflex-blur);
  --surface-glass-reflex-light-color: var(--color-white);
  --surface-glass-reflex-dark-color: var(--color-black);

  /* Sonic Architect Surface Pattern — nur die tile-relevanten Tokens */
  --sonic-surface-radius: var(--surface-radius);
  --sonic-surface-line: none;
  --sonic-surface-blur: var(--surface-glass-blur);
  --sonic-surface-saturation: var(--surface-glass-saturation);
  --sonic-surface-fallback-bg: var(--glass-backdrop-fallback-bg);
  --sonic-surface-tile-bg: var(--surface-glass-bg-subtle);
  --sonic-surface-tile-bg-hover: var(--surface-glass-bg-subtle-hover);
  --sonic-surface-tile-shadow:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-light-color)
          calc(var(--surface-glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px var(--surface-glass-reflex-blur) -2px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-light-color)
          calc(var(--surface-glass-reflex-light) * 80%),
        transparent
      ),
    inset -2px -2px var(--surface-glass-reflex-blur) -2px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-light-color)
          calc(var(--surface-glass-reflex-light) * 70%),
        transparent
      ),
    inset -3px -8px 1px -6px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-light-color)
          calc(var(--surface-glass-reflex-light) * 50%),
        transparent
      ),
    inset -0.3px -1px 4px 0
      color-mix(
        in srgb,
        var(--surface-glass-reflex-dark-color)
          calc(var(--surface-glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px var(--surface-glass-reflex-blur) -2px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-dark-color)
          calc(var(--surface-glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0 3px 4px -2px
      color-mix(
        in srgb,
        var(--surface-glass-reflex-dark-color)
          calc(var(--surface-glass-reflex-dark) * 20%),
        transparent
      ),
    0 1px 5px 0
      color-mix(
        in srgb,
        var(--surface-glass-reflex-dark-color)
          calc(var(--surface-glass-reflex-dark) * 10%),
        transparent
      ),
    0 6px 16px 0
      color-mix(
        in srgb,
        var(--surface-glass-reflex-dark-color)
          calc(var(--surface-glass-reflex-dark) * 8%),
        transparent
      );
}

/* ==========================================================================
   GLASS SURFACE COMPONENT (nur tile-Variante)
   Quelle: audics-suite src/ui/composites/glass-surface.css
   ========================================================================== */

.glass-surface {
  position: relative;
  border: var(--sonic-surface-line);
  border-radius: var(--sonic-surface-radius);
  background: var(--sonic-surface-bg);
  box-shadow: var(--sonic-surface-shadow);
  color: inherit;
  -webkit-backdrop-filter: blur(var(--sonic-surface-blur))
    saturate(var(--sonic-surface-saturation));
  transition:
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .glass-surface {
    backdrop-filter: blur(var(--sonic-surface-blur))
      saturate(var(--sonic-surface-saturation));
  }
}

.glass-surface--tile {
  --sonic-surface-bg: var(--sonic-surface-tile-bg);
  --sonic-surface-bg-hover: var(--sonic-surface-tile-bg-hover);
  --sonic-surface-shadow: var(--sonic-surface-tile-shadow);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .glass-surface {
    background: var(--sonic-surface-fallback-bg);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-surface {
    background: var(--sonic-surface-fallback-bg);
    -webkit-backdrop-filter: none;
  }

  @supports (backdrop-filter: blur(1px)) {
    .glass-surface {
      backdrop-filter: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-surface {
    transition: none;
  }
}