/* ============================================================
   Team-Dashboard · tokens.css
   Farbtoken, Typografie, Radien, Schatten – hell und dunkel.
   Alles Weitere greift ausschließlich über diese Variablen zu.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

/* ---------------------------------------------- Farbtoken: Hell */

/* Der Akzent ist bewusst zurückhaltend gewählt. In einem Ticketsystem müssen die
   Statusfarben sofort lesbar sein – ein lauter Markenton würde mit ihnen
   konkurrieren. Die Neutraltöne sind leicht ins Blaue gezogen, damit sie zum
   Akzent gehören und nicht wie beliebiges Grau wirken. */

:root {
  color-scheme: light;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Schriftgrade */
  --fs-xs: 0.72rem;
  --fs-sm: 0.8rem;
  --fs-md: 0.875rem;
  --fs-base: 0.95rem;
  --fs-xl: 1.35rem;

  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #e9edf4;
  --column-bg: #e4e9f1;
  --border: #dfe4ec;
  --border-strong: #c5cdda;

  --text: #0d1420;
  --text-2: #4e5a6e;
  --text-3: #838ea1;

  --accent: #3a57d8;
  --accent-2: #5b76f0;
  --accent-grad: linear-gradient(140deg, #3a57d8 0%, #5b76f0 100%);
  --accent-soft: #e6ecfd;
  --accent-ring: rgba(58, 87, 216, 0.22);

  --neutral-bg: #e9edf4;  --neutral-fg: #56617a;
  --blue-bg: #e1ecfd;     --blue-fg: #1a56c4;   --blue-dot: #3b82f6;
  --amber-bg: #fdf0d5;    --amber-fg: #8a5a06;  --amber-dot: #e8a317;
  --green-bg: #dff3e7;    --green-fg: #116b3c;  --green-dot: #1fa25b;
  --red-bg: #fde9e9;      --red-fg: #a82323;    --red-border: #f3c9c9;
  --danger: #d02f2f;

  /* Statusfarben – eigene Ebene, damit sie überall gleich sprechen */
  --st-offen: var(--blue-dot);
  --st-in_bearbeitung: var(--accent);
  --st-warten: var(--amber-dot);
  --st-geschlossen: var(--green-dot);

  --side-bg: linear-gradient(180deg, #182034 0%, #101725 55%, #0c111c 100%);
  --side-text: #93a0b8;
  --side-text-strong: #eef1f8;
  --side-hover: rgba(255, 255, 255, 0.07);
  --side-border: rgba(255, 255, 255, 0.07);

  --shadow-1: 0 1px 2px rgba(13, 20, 32, 0.05), 0 1px 3px rgba(13, 20, 32, 0.04);
  --shadow-2: 0 4px 14px -5px rgba(13, 20, 32, 0.13), 0 2px 5px -2px rgba(13, 20, 32, 0.07);
  --shadow-3: 0 24px 48px -16px rgba(13, 20, 32, 0.26);

  /* Enger als zuvor: ein Arbeitswerkzeug, keine Consumer-App */
  --radius: 12px;
  --radius-md: 9px;
  --radius-sm: 7px;

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e5a6e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ---------------------------------------------- Farbtoken: Dunkel */

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

  --bg: #0b0f17;
  --surface: #131926;
  --surface-2: #1a2130;
  --surface-3: #222b3c;
  --column-bg: #0f141f;
  --border: #242d3e;
  --border-strong: #354055;

  --text: #e6ebf4;
  --text-2: #9aa6bc;
  --text-3: #6e7b93;

  --accent: #7c8cff;
  --accent-2: #a0aaff;
  --accent-grad: linear-gradient(140deg, #5c6dfa 0%, #8f9bff 100%);
  --accent-soft: #1b2142;
  --accent-ring: rgba(124, 140, 255, 0.32);

  --neutral-bg: #232b3b;  --neutral-fg: #a5b0c6;
  --blue-bg: #16253f;     --blue-fg: #8ab0ff;   --blue-dot: #5b90f5;
  --amber-bg: #33280f;    --amber-fg: #e8b862;  --amber-dot: #e0a53c;
  --green-bg: #123020;    --green-fg: #62cc8d;  --green-dot: #35b76c;
  --red-bg: #331a1c;      --red-fg: #ff8b8b;    --red-border: #4d2528;
  --danger: #f26565;

  --st-offen: var(--blue-dot);
  --st-in_bearbeitung: var(--accent);
  --st-warten: var(--amber-dot);
  --st-geschlossen: var(--green-dot);

  --side-bg: linear-gradient(180deg, #141b2c 0%, #0d121e 60%, #0a0e17 100%);
  --side-text: #8d99b3;
  --side-text-strong: #f0f3fa;
  --side-hover: rgba(255, 255, 255, 0.08);
  --side-border: rgba(255, 255, 255, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px -7px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 26px 52px -18px rgba(0, 0, 0, 0.72);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Sanfter Übergang beim Umschalten */
.theme-switching, .theme-switching * {
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease !important;
}

/* ---------------------------------------------- Animationen */

@keyframes float-up {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(-14px); }
  100% { opacity: 0; transform: translateY(-28px); }
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(85vh) rotate(420deg); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-12px) scale(1.06); }
  60% { transform: translateY(0) scale(0.97); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(46px, 34px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}