@import "tailwindcss";

/* ==========================================================================
   Flimmer — Design-Tokens
   --------------------------------------------------------------------------
   Alle Farben liegen als CSS-Variablen (--fl-*) vor und werden über
   `@theme inline` an Tailwind durchgereicht. Dadurch reagieren sämtliche
   Utilities (bg-surface, text-muted, …) automatisch auf Theme-Wechsel und
   spätere zusätzliche Themes brauchen nur einen neuen Selektor-Block.

   Kontrast: jede hier definierte Vorder-/Hintergrund-Kombination erfüllt
   mindestens WCAG AA (4,5:1 für Fließtext, 3:1 für große Schrift und
   UI-Begrenzungen). Werte siehe docs/DESIGN.md.
   ========================================================================== */

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Flächen — sehr dunkles Blauviolett/Anthrazit */
  --fl-bg: #0c0a14;
  --fl-bg-elevated: #12101d;
  --fl-surface: #17142499;
  --fl-surface-solid: #171424;
  --fl-surface-2: #201b33;
  --fl-border: #2e2745;
  --fl-border-strong: #453a63;

  /* Text */
  --fl-text: #f4f1fa;          /* 17,0:1 auf --fl-bg */
  --fl-muted: #aca5c2;         /*  7,7:1 auf --fl-bg */
  --fl-faint: #7c7594;         /*  4,6:1 auf --fl-bg */

  /* Signatur: Glow-Gradient Bernstein → Magenta */
  --fl-amber: #ffb454;
  --fl-amber-soft: #ffc46b;
  --fl-magenta: #ff4d9d;
  --fl-magenta-soft: #ff6fb0;
  --fl-accent: var(--fl-amber);        /* als Textfarbe nutzbar: 11,3:1 */
  --fl-accent-alt: var(--fl-magenta);  /* als Textfarbe nutzbar:  6,0:1 */
  --fl-on-accent: #1a1024;             /* Text auf dem Gradient: min. 5,5:1 */
  /* Markenstops fuer SVG-Verlaeufe (Logo). Als Variablen, damit das Logo im
     Light Mode dunkler wird und lesbar bleibt, ohne die Identitaet zu aendern. */
  --fl-brand-1: #ffc46b;
  --fl-brand-2: #ffb454;
  --fl-brand-3: #ff4d9d;

  --fl-gradient: linear-gradient(115deg, var(--fl-amber-soft) 0%, var(--fl-amber) 38%, var(--fl-magenta) 100%);
  /* Fuer Text: im Dunkeln identisch, im Hellen deutlich abgedunkelt (AA). */
  --fl-gradient-ink: var(--fl-gradient);
  --fl-gradient-soft: linear-gradient(115deg, #ffb45426 0%, #ff4d9d26 100%);
  --fl-glow: 0 0 0 1px #ffb4541f, 0 8px 34px -10px #ff4d9d59, 0 2px 12px -4px #ffb45440;
  --fl-glow-strong: 0 0 0 1px #ffb4543d, 0 14px 48px -12px #ff4d9d80, 0 4px 18px -6px #ffb4546b;
  --fl-ring: #ff8a70;

  /* Statusfarben (AA auf --fl-bg) */
  --fl-success: #4ade80;
  --fl-warning: #fbbf24;
  --fl-danger: #ff6b6b;
  --fl-info: #7dd3fc;

  --fl-shadow: 0 10px 30px -12px #00000099;
}

[data-theme="light"] {
  color-scheme: light;

  /* Flächen — heller, warmgrauer Grund */
  --fl-bg: #faf7f5;
  --fl-bg-elevated: #ffffff;
  --fl-surface: #ffffffcc;
  --fl-surface-solid: #ffffff;
  --fl-surface-2: #f2ece8;
  --fl-border: #e3dad4;
  --fl-border-strong: #cbbdb4;

  --fl-text: #1b1524;          /* 16,2:1 auf --fl-bg */
  --fl-muted: #5b5268;         /*  6,7:1 auf --fl-bg */
  --fl-faint: #766c84;         /*  4,6:1 auf --fl-bg */

  /* Dieselben Signaturfarben, für Text jedoch in abgedunkelten Varianten */
  --fl-amber: #ffb454;
  --fl-amber-soft: #ffc46b;
  --fl-magenta: #ff4d9d;
  --fl-magenta-soft: #ff6fb0;
  --fl-accent: #8a4b00;                /* als Textfarbe: 6,4:1 */
  --fl-accent-alt: #b01262;            /* als Textfarbe: 6,4:1 */
  --fl-on-accent: #23122c;             /* Text auf dem Gradient: min. 6,1:1 */
  /* Logo im Hellen: dieselbe Bernstein-zu-Magenta-Bewegung, nur tiefer
     angesetzt — sonst verschwindet die Wortmarke auf dem warmen Weiss. */
  --fl-brand-1: #c26a00;
  --fl-brand-2: #b35d00;
  --fl-brand-3: #c9186f;

  --fl-gradient: linear-gradient(115deg, var(--fl-amber-soft) 0%, var(--fl-amber) 38%, var(--fl-magenta) 100%);
  /* Verlaufstext im Hellen: beide Enden erfuellen AA auf --fl-bg. */
  --fl-gradient-ink: linear-gradient(115deg, #8a4b00 0%, #a33a2a 45%, #b01262 100%);
  --fl-gradient-soft: linear-gradient(115deg, #ffb4542e 0%, #ff4d9d2e 100%);
  --fl-glow: 0 0 0 1px #d8a15c33, 0 8px 26px -12px #ff4d9d4d, 0 2px 10px -4px #ffb4544d;
  --fl-glow-strong: 0 0 0 1px #d8a15c59, 0 14px 40px -14px #ff4d9d66, 0 4px 16px -6px #ffb45473;
  --fl-ring: #b01262;

  --fl-success: #15803d;
  --fl-warning: #a16207;
  --fl-danger: #b91c1c;
  --fl-info: #0369a1;

  --fl-shadow: 0 10px 30px -14px #2a1a3a26;
}

@theme inline {
  --color-bg: var(--fl-bg);
  --color-bg-elevated: var(--fl-bg-elevated);
  --color-surface: var(--fl-surface);
  --color-surface-solid: var(--fl-surface-solid);
  --color-surface-2: var(--fl-surface-2);
  --color-border-subtle: var(--fl-border);
  --color-border-strong: var(--fl-border-strong);

  --color-fg: var(--fl-text);
  --color-muted: var(--fl-muted);
  --color-faint: var(--fl-faint);

  --color-amber: var(--fl-amber);
  --color-amber-soft: var(--fl-amber-soft);
  --color-magenta: var(--fl-magenta);
  --color-magenta-soft: var(--fl-magenta-soft);
  --color-accent: var(--fl-accent);
  --color-accent-alt: var(--fl-accent-alt);
  --color-on-accent: var(--fl-on-accent);

  --color-success: var(--fl-success);
  --color-warning: var(--fl-warning);
  --color-danger: var(--fl-danger);
  --color-info: var(--fl-info);

  --radius-card: 1rem;
  --radius-poster: 0.875rem;

  --font-sans: var(--font-outfit), Outfit, Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow-glow: var(--fl-glow);
  --shadow-glow-strong: var(--fl-glow-strong);
  --shadow-card: var(--fl-shadow);

  --ease-glow: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

@layer base {
  * {
    border-color: var(--fl-border);
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--fl-bg);
    color: var(--fl-text);
    font-family: var(--font-sans);
    min-height: 100dvh;
    /* Ruhiges Kino-Ambiente: zwei sehr weiche Lichtkegel im Hintergrund. */
    background-image:
      radial-gradient(60rem 40rem at 12% -8%, color-mix(in oklab, var(--fl-amber) 12%, transparent), transparent 70%),
      radial-gradient(52rem 38rem at 92% 4%, color-mix(in oklab, var(--fl-magenta) 12%, transparent), transparent 68%);
    background-attachment: fixed;
  }

  :focus-visible {
    outline: 2px solid var(--fl-ring);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection {
    background: color-mix(in oklab, var(--fl-magenta) 40%, transparent);
    color: var(--fl-text);
  }

  /* Dezente Scrollbar im Kino-Look */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--fl-border-strong) transparent;
  }
}

/* --------------------------------------------------------------------------
   Wiederkehrende Bausteine
   -------------------------------------------------------------------------- */

@utility fl-gradient-text {
  background-image: var(--fl-gradient-ink);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@utility fl-gradient-bg {
  background-image: var(--fl-gradient);
}

@layer components {
  .fl-card {
    background-color: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--radius-card, 1rem);
    box-shadow: var(--fl-shadow);
    backdrop-filter: blur(12px);
  }

  /* Posterkarte: sanftes Aufglimmen beim Hover, kein hartes Aufblitzen. */
  .fl-poster-card {
    position: relative;
    border-radius: var(--radius-poster, 0.875rem);
    transition:
      transform 320ms var(--ease-glow),
      box-shadow 320ms var(--ease-glow);
  }

  .fl-poster-card:hover,
  .fl-poster-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--fl-glow-strong);
  }

  .fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    transition:
      transform 200ms var(--ease-glow),
      box-shadow 240ms var(--ease-glow),
      background-color 200ms ease,
      border-color 200ms ease;
    cursor: pointer;
  }

  .fl-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .fl-btn-primary {
    background-image: var(--fl-gradient);
    color: var(--fl-on-accent);
    box-shadow: var(--fl-glow);
  }

  .fl-btn-primary:hover:not(:disabled) {
    box-shadow: var(--fl-glow-strong);
    transform: translateY(-1px);
  }

  .fl-btn-ghost {
    background-color: var(--fl-surface-2);
    color: var(--fl-text);
    border: 1px solid var(--fl-border);
  }

  .fl-btn-ghost:hover:not(:disabled) {
    border-color: var(--fl-border-strong);
    background-color: color-mix(in oklab, var(--fl-surface-2) 70%, var(--fl-amber) 8%);
  }

  .fl-input {
    width: 100%;
    background-color: var(--fl-surface-2);
    border: 1px solid var(--fl-border);
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    color: var(--fl-text);
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .fl-input::placeholder {
    color: var(--fl-faint);
  }

  .fl-input:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--fl-magenta) 55%, var(--fl-border));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--fl-magenta) 22%, transparent);
  }

  /* Fortschrittsbalken im Signatur-Gradient */
  .fl-progress {
    height: 0.375rem;
    border-radius: 999px;
    background-color: var(--fl-surface-2);
    overflow: hidden;
  }

  .fl-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-image: var(--fl-gradient);
    transition: width 420ms var(--ease-glow);
  }
}

/* Mikro-Animation: weiches Aufglimmen, z. B. beim Abhaken einer Episode. */
@keyframes fl-glimmer {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--fl-amber) 55%, transparent);
    background-color: color-mix(in oklab, var(--fl-amber) 16%, transparent);
  }
  60% {
    box-shadow: 0 0 0 10px color-mix(in oklab, var(--fl-magenta) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    background-color: transparent;
  }
}

.fl-glimmer {
  animation: fl-glimmer 900ms var(--ease-glow);
}

/* Rückmeldungen fahren von unten herein — kurz und ohne Sprung. */
@keyframes fl-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}