/*
 * Apple-inspirierte Verfeinerungen für FraDi — als statische Datei geladen
 * (kein Vite-Build nötig, wie forms.css/richtext.css). Umgesetzt sind die
 * CSS-ausdrückbaren Prinzipien aus der Design-Vorgabe:
 *   §1 Response (Press-Feedback), §4/§7 weiche Easings, §12 Material/Tiefe,
 *   §15 Typografie (Tracking/Leading), §14 Reduced Motion/Transparency/Contrast.
 * Gesten-/Spring-Physik (JS) entfällt bewusst: server-gerendert + strenge CSP.
 * Farben stets aus den Theme-Tokens (hell/dunkel).
 */

:root {
  /* Sanftes Auslaufen ohne Overshoot (kritisch gedämpft) für Press/Hover. */
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Leichter Overshoot — nur für „auftauchende" Elemente (Modal). */
  --ease-emerge: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---- §1 Response: sofortiges, kontinuierliches Press-Feedback ---- */
.ds-btn,
.app-nav-item,
.app-drawer-toggle {
  transition:
    transform 120ms var(--ease-out-soft),
    background var(--duration-fast, 150ms) var(--ease-standard, ease),
    border-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    color var(--duration-fast, 150ms) var(--ease-standard, ease),
    box-shadow 160ms var(--ease-out-soft);
}
.ds-btn:active {
  transform: scale(0.96);
}
.app-nav-item:active,
.app-drawer-toggle:active {
  transform: scale(0.98);
}

/* ---- Bild-Outlines: dezente 1px-Kante für konsistente Tiefe (better-ui) ----
   Reines Schwarz/Weiß bei niedriger Deckkraft, nie ein getöntes Neutral. */
main img {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}
:root:not([data-theme="light"]) main img {
  outline-color: oklch(1 0 0 / 0.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) main img {
    outline-color: oklch(0 0 0 / 0.1);
  }
}
[data-theme="dark"] main img {
  outline-color: oklch(1 0 0 / 0.1);
}

/* ---- Outline-Button-Variante (Akzent-Rand, transparenter Grund) ----
   Ergänzt das ds-System ohne CSS-Build; erbt Press-Feedback von .ds-btn. */
.ds-btn--outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.ds-btn--outline:hover:not(:disabled) {
  background: var(--color-accent-subtle);
}
.ds-btn--outline:active:not(:disabled) {
  background: var(--color-accent-subtle);
}

/* ---- §15 Typografie: große Schrift enger tracken, straffes Leading ---- */
h1 {
  letter-spacing: -0.021em;
  line-height: 1.12;
}
h2 {
  letter-spacing: -0.014em;
  line-height: 1.2;
}
h3 {
  letter-spacing: -0.008em;
}
.ds-btn {
  letter-spacing: -0.006em;
}

/* ---- §12 Material: translucente, unscharfe Topbar (Inhalt scrollt darunter) ---- */
.app-topbar {
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}

/* ---- §12 Tiefe: Karten mit weicherem, geschichtetem Schatten ---- */
.ds-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 20px -8px rgba(0, 0, 0, 0.1);
}
:root:not([data-theme="light"]) .ds-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 28px -10px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ds-card {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 6px 20px -8px rgba(0, 0, 0, 0.1);
  }
}
[data-theme="dark"] .ds-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 28px -10px rgba(0, 0, 0, 0.6);
}

/* ---- §12 Modal „materialisiert" (Scale + Fade) beim Öffnen ----
   Rein additiv über @starting-style: animiert nur den Eintritt; ältere Browser
   ignorieren es (unverändertes Verhalten). Schließen bleibt sofort. */
dialog[data-modal] {
  transition:
    opacity 220ms var(--ease-out-soft),
    transform 260ms var(--ease-emerge);
}
@starting-style {
  dialog[data-modal][open] {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
dialog[data-modal]::backdrop {
  transition: opacity 220ms var(--ease-out-soft);
}
@starting-style {
  dialog[data-modal][open]::backdrop {
    opacity: 0;
  }
}

/* ---- §14 Barrierefreiheit: Bewegung/Transparenz/Kontrast respektieren ---- */
@media (prefers-reduced-motion: reduce) {
  .ds-btn,
  .app-nav-item,
  .app-drawer-toggle {
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .ds-btn:active,
  .app-nav-item:active,
  .app-drawer-toggle:active {
    transform: none;
  }
  dialog[data-modal] {
    transition: opacity 160ms ease;
    transform: none;
  }
  @starting-style {
    dialog[data-modal][open] {
      transform: none;
    }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .app-topbar {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .app-topbar {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ds-card {
    border-color: var(--color-text);
  }
}