/* =============================================================================
   Kuendigungscenter - Design-System (Tokens & Basis)
   Extrahiert aus design/kuendigungscenter_apple_v2.html (verbindliche Vorlage).
   Apple-Anmutung, Glasmorphismus, Hell- und Dunkelmodus.

   Aufbau:
     1. Globale Tokens (Font, Easing, Akzente, Status)
     2. Hell-Theme  ([data-theme="light"])
     3. Dunkel-Theme ([data-theme="dark"])
     4. Reset & Basis (body, Typografie, Fokus, Scrollbar)
     5. Aurora-Hintergrund
     6. Zugaenglichkeit (prefers-reduced-motion)

   Wartung: NUR hier Farben/Abstaende/Radien/Schatten aendern. Komponenten
   (Sidebar, Topbar, Cards ...) liegen in shell.css und greifen auf diese
   Variablen zu.
   ============================================================================= */

/* -- 1. Globale Tokens ----------------------------------------------------- */
:root {
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Bewegungs-Kurven */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Akzent- und Statusfarben (themeunabhaengig) */
  --accent: #2f6bff;
  --accent-2: #6a5cff;
  --ok: #1fbf75;
  --warn: #e5890a;
  --urgent: #f5484a;

  /* Radien */
  --r-sm: 9px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 22px;

  /* Abstaende */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 26px;

  /* Glas-Unschaerfe (backdrop-filter) */
  --blur: blur(30px) saturate(160%);
}

/* -- 2. Hell-Theme --------------------------------------------------------- */
[data-theme="light"] {
  --ink: #0b0f1a;
  --ink-2: #5c6675;
  --ink-3: #8a93a3;

  --canvas-1: #eef1f8;
  --canvas-2: #e7ecf6;
  --canvas-3: #f4f0fb;

  --glass: rgba(255, 255, 255, .62);
  --glass-2: rgba(255, 255, 255, .78);
  --glass-brd: rgba(255, 255, 255, .9);

  --hair: rgba(11, 15, 26, .08);
  --hair-2: rgba(11, 15, 26, .05);
  --edge: rgba(255, 255, 255, .75);

  --shadow: 0 1px 1px rgba(11, 15, 26, .04),
    0 8px 24px -10px rgba(11, 15, 26, .18),
    0 30px 60px -30px rgba(11, 15, 26, .22);

  --accent-soft: rgba(47, 107, 255, .10);
  --ok-soft: rgba(31, 191, 117, .13);
  --warn-soft: rgba(229, 137, 10, .14);
  --urgent-soft: rgba(245, 72, 74, .13);

  --paper: #ffffff;
  --paper-ink: #1a2030;
}

/* -- 3. Dunkel-Theme ------------------------------------------------------- */
[data-theme="dark"] {
  --ink: #f4f7fd;
  --ink-2: #9aa4b4;
  --ink-3: #6b7484;

  --canvas-1: #080b13;
  --canvas-2: #0a0e18;
  --canvas-3: #0d1020;

  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .085);
  --glass-brd: rgba(255, 255, 255, .10);

  --hair: rgba(255, 255, 255, .09);
  --hair-2: rgba(255, 255, 255, .06);
  --edge: rgba(255, 255, 255, .14);

  --shadow: 0 1px 1px rgba(0, 0, 0, .4),
    0 10px 30px -12px rgba(0, 0, 0, .6),
    0 40px 80px -40px rgba(0, 0, 0, .7);

  --accent-soft: rgba(47, 107, 255, .18);
  --ok-soft: rgba(31, 191, 117, .16);
  --warn-soft: rgba(229, 137, 10, .18);
  --urgent-soft: rgba(245, 72, 74, .16);

  --paper: #f7f8fb;
  --paper-ink: #1a2030;
}

/* -- 4. Reset & Basis ------------------------------------------------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
  transition: background .6s var(--ease-soft), color .4s var(--ease-soft);
}

a {
  color: var(--accent);
  text-decoration: none;
}

/* Sichtbarer Tastatur-Fokus (nur bei Tastaturnavigation, nicht bei Maus). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar dezent im Glas-Stil. */
.scroll::-webkit-scrollbar {
  width: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* -- 5. Aurora-Hintergrund (weiches Umgebungslicht) ------------------------ */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  animation: drift 22s var(--ease-soft) infinite alternate;
}

.aurora .a {
  width: 52vw;
  height: 52vw;
  left: -12vw;
  top: -16vw;
  background: radial-gradient(circle, var(--accent), transparent 62%);
}

.aurora .b {
  width: 46vw;
  height: 46vw;
  right: -14vw;
  top: -8vw;
  background: radial-gradient(circle, var(--accent-2), transparent 62%);
  animation-delay: -7s;
}

.aurora .c {
  width: 44vw;
  height: 44vw;
  left: 26vw;
  bottom: -22vw;
  background: radial-gradient(circle, #12c2a0, transparent 62%);
  opacity: .32;
  animation-delay: -13s;
}

[data-theme="dark"] .aurora span {
  opacity: .28;
}

@keyframes drift {
  to {
    transform: translate3d(6vw, 4vw, 0) scale(1.12);
  }
}

/* Sanftes Einschweben von Inhalten. */
.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .7s var(--ease-spring) forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* -- 6. Zugaenglichkeit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }

  .aurora span {
    animation: none;
  }
}