/* ==========================================================================
   design-normal — Design-Tokens "Aurora"
   Helles Fundament, Indigo→Cyan als Signaturverlauf.
   Hell ist der Standardfall; die dunkle Fassung existiert, damit Seiten dem
   Systemtheme folgen können, nicht als gleichwertiger zweiter Modus.
   ========================================================================== */

:root {
  /* --- Akzent ----------------------------------------------------------- */
  /* Zwei Verläufe, weil ein einziger nicht beides kann: --gradient trägt
     weißen Text (alle Stützstellen >= 5:1), --gradient-deco leuchtet, darf
     aber niemals Text tragen. Verwechseln der beiden ist der häufigste
     Fehler in diesem System.                                               */
  --accent:            #4453e0;   /* Indigo — trägt Text, Icons, Aktionen   */
  --accent-strong:     #3a46c8;   /* Hover / gedrückter Zustand             */
  --accent-soft:       #eef0ff;   /* Flächiger Akzent-Hintergrund           */
  --accent-2:          #0e7490;   /* Teal — zweite Stützstelle, textfähig   */
  --accent-deco:       #22d3ee;   /* Cyan — NUR Glow, Ränder, Deko          */
  --gradient:          linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-deco:     linear-gradient(135deg, #5b6cff, var(--accent-deco));

  /* --- Flächen ---------------------------------------------------------- */
  --bg:                #f7f8fd;
  --bg-2:              #eef1fa;
  --bg-gradient:       linear-gradient(165deg, var(--bg), var(--bg-2));
  --surface:           #ffffffcc;  /* Glass-Karte: halbtransparent          */
  --surface-solid:     #ffffff;    /* wenn kein Blur möglich ist            */
  --weekend-bg:        #dce3fa;
  --holiday-bg:        #cff1eb;
  --surface-sunken:    #e9ecf6;    /* Tracks, Eingabefelder, Code-Blöcke    */

  /* --- Linien ----------------------------------------------------------- */
  --border:            #dfe3ee;   /* Trennlinien, dekorativ                 */
  --border-strong:     #d3d8e8;   /* betonte Trennlinien                    */
  --border-input:      #8189a8;   /* Formularränder — 3:1, WCAG 1.4.11      */

  /* --- Text ------------------------------------------------------------- */
  --text:              #12141c;
  --text-muted:        #5c6274;
  --text-on-accent:    #ffffff;

  /* --- Semantik --------------------------------------------------------- */
  --success:           #15803d;
  --warning:           #b45309;
  --error:             #dc2626;

  /* --- Glanz ------------------------------------------------------------ */
  --glow:              0 6px 20px -6px #4453e099;   /* unter Primäraktionen */
  --glow-soft:         radial-gradient(circle, #5b6cff22 0%, transparent 70%);
  --sheen:             linear-gradient(115deg, transparent 35%, #ffffffcc 50%, transparent 65%);
  --blur:              14px;

  /* --- Schatten --------------------------------------------------------- */
  --shadow-sm:         0 1px 2px 0 #3a45a014;
  --shadow-md:         0 8px 24px -12px #3a45a055;
  --shadow-lg:         0 20px 48px -20px #3a45a066;

  /* --- Radien ----------------------------------------------------------- */
  --r-sm:              12px;   /* Badges, Inputs, kleine Kacheln            */
  --r-md:              20px;   /* Karten — der Standardfall                 */
  --r-lg:              28px;   /* Sektionen, Modals                         */
  --r-pill:            50px;   /* Buttons, Chips                            */

  /* --- Typografie ------------------------------------------------------- */
  --font-sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --tracking-tight:    -0.02em;   /* Überschriften                          */
  --tracking-wide:     0.12em;    /* Mono-Labels in Versalien               */
  --leading-body:      1.6;

  /* --- Abstände (4er-Raster) -------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* --- Bewegung --------------------------------------------------------- */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:            0.15s var(--ease);
  --t-base:            0.25s var(--ease);
}

/* --------------------------------------------------------------------------
   Dunkle Fassung. Nur Token-Werte werden neu belegt — nie neue Tokens.
   Zwei Blöcke: Systemvorgabe und ausdrückliche Wahl über data-theme.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:          #7c8cff;
    --accent-strong:   #98a5ff;
    --accent-soft:     #1b2036;
    --accent-2:        #5ee3f5;
    --accent-deco:     #5ee3f5;
    --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
    --gradient-deco:   linear-gradient(135deg, #7c8cff, #5ee3f5);

    --bg:              #0e1016;
    --bg-2:            #0a0c11;
    --surface:         #161a23cc;
    --surface-solid:   #161a23;
    --weekend-bg:      #232b43;
    --holiday-bg:      #12302f;
    --surface-sunken:  #11141c;

    --border:          #262c3a;
    --border-strong:   #333b4d;
    --border-input:    #666f8c;

    --text:            #e6e8f0;
    --text-muted:      #9aa2b8;
    --text-on-accent:  #0a0c11;

    --success:         #4ade80;
    --warning:         #fbbf24;
    --error:           #f87171;

    --glow:            0 6px 24px -6px #7c8cffaa;
    --glow-soft:       radial-gradient(circle, #7c8cff2e 0%, transparent 70%);
    --sheen:           linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%);

    --shadow-sm:       0 1px 2px 0 #00000059;
    --shadow-md:       0 8px 24px -12px #000000b3;
    --shadow-lg:       0 20px 48px -20px #000000cc;
  }
}

:root[data-theme="dark"] {
  --accent:          #7c8cff;
  --accent-strong:   #98a5ff;
  --accent-soft:     #1b2036;
  --accent-2:        #5ee3f5;
  --accent-deco:     #5ee3f5;
  --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-deco:   linear-gradient(135deg, #7c8cff, #5ee3f5);

  --bg:              #0e1016;
  --bg-2:            #0a0c11;
  --surface:         #161a23cc;
  --surface-solid:   #161a23;
  --weekend-bg:      #232b43;
  --holiday-bg:      #12302f;
  --surface-sunken:  #11141c;

  --border:          #262c3a;
  --border-strong:   #333b4d;
  --border-input:    #666f8c;

  --text:            #e6e8f0;
  --text-muted:      #9aa2b8;
  --text-on-accent:  #0a0c11;

  --success:         #4ade80;
  --warning:         #fbbf24;
  --error:           #f87171;

  --glow:            0 6px 24px -6px #7c8cffaa;
  --glow-soft:       radial-gradient(circle, #7c8cff2e 0%, transparent 70%);
  --sheen:           linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%);

  --shadow-sm:       0 1px 2px 0 #00000059;
  --shadow-md:       0 8px 24px -12px #000000b3;
  --shadow-lg:       0 20px 48px -20px #000000cc;
}

/* --------------------------------------------------------------------------
   Bewegung respektiert die Systemeinstellung. Der Shimmer ist Zierde —
   er darf ersatzlos entfallen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}