/* ============================================================
   my-vitalteam — gemeinsame Design-Tokens (Layout 2026-10)
   EINZIGE Quelle für Farben, Flächen, Radien, Schatten, Schrift
   und Bewegung des Backoffice (SPA) und — ab Phase 4 — der
   öffentlichen Seiten. Komponenten lesen nur diese Variablen.
   Antd braucht Hex-Werte für seine Farbableitung: die Grundfarben
   stehen deshalb gespiegelt in frontend/ui/src/theme/tokens.ts
   und müssen gleich bleiben.
   Kein @font-face hier: die Datei wird auch vom SPA-Bundle
   importiert, Schriften bindet jede Welt selbst ein.
   ============================================================ */

:root {
  /* Marke */
  --mvt-primary: #0d9488;
  --mvt-primary-dark: #0f766e;
  --mvt-primary-deep: #115e59;
  --mvt-primary-lift: #16a597;
  --mvt-primary-soft: #ccfbf1;
  --mvt-primary-tint: #e6f6f1;
  --mvt-accent: #ff7a59;
  --mvt-accent-dark: #f05d3a;
  --mvt-accent-strong: #d8431f;
  --mvt-accent-lift: #ff9074;
  --mvt-accent-soft: #ffe7dd;
  --mvt-accent-tint: #fff4ef;
  --mvt-gold: #ffd98a;
  --mvt-gold-soft: #fff2cf;
  --mvt-gold-ink: #9a6b06;

  /* Tiefe Petrol-Töne: Sidebar, Hero, dunkle Flächen */
  --mvt-ink: #0a3b37;
  --mvt-ink-2: #0e4a44;
  --mvt-ink-3: #072e2b;
  --mvt-ink-lift: #10635a;
  --mvt-ink-soft: #2a7f74;

  /* Text */
  --mvt-text: #0a3b37;
  --mvt-text-soft: #557069;
  --mvt-text-faint: #8aa39c;
  --mvt-text-on-dark: #ffffff;
  --mvt-text-on-dark-soft: rgba(255, 255, 255, 0.78);
  --mvt-text-on-dark-faint: rgba(255, 255, 255, 0.52);

  /* Flächen */
  --mvt-bg-app: #eef6f3;
  --mvt-bg-surface: #ffffff;
  --mvt-bg-subtle: #f5faf8;
  --mvt-bg-hover: #edf7f4;
  --mvt-bg-selected: #e0f4ee;
  --mvt-border: #dfece7;
  --mvt-border-strong: #c7ddd5;
  --mvt-on-dark-hover: rgba(255, 255, 255, 0.08);
  --mvt-on-dark-active: rgba(255, 255, 255, 0.14);
  --mvt-on-dark-line: rgba(255, 255, 255, 0.12);
  --mvt-overlay: rgba(6, 38, 35, 0.48);

  /* Status */
  --mvt-success: #12946b;
  --mvt-success-soft: #dcf5ea;
  --mvt-warning: #c98a04;
  --mvt-warning-soft: #fff3d6;
  --mvt-danger: #d64545;
  --mvt-danger-soft: #fdecec;

  /* Verläufe — bewusst auch familienübergreifend (Petrol → Koralle) */
  --mvt-grad-sidebar: linear-gradient(180deg, var(--mvt-ink-2) 0%, var(--mvt-ink) 62%, var(--mvt-ink-3) 100%);
  --mvt-grad-sidebar-glow: radial-gradient(120% 55% at 0% 100%, rgba(255, 122, 89, 0.22), transparent 60%);
  --mvt-grad-app: radial-gradient(1200px 520px at 100% -10%, rgba(13, 148, 136, 0.10), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(255, 122, 89, 0.07), transparent 60%);
  --mvt-grad-brand: linear-gradient(135deg, var(--mvt-primary-lift) 0%, var(--mvt-primary-dark) 55%, var(--mvt-ink-2) 100%);
  --mvt-grad-energy: linear-gradient(120deg, var(--mvt-primary) 0%, var(--mvt-primary-lift) 45%, var(--mvt-accent) 100%);
  --mvt-grad-accent: linear-gradient(135deg, var(--mvt-accent-lift), var(--mvt-accent-dark));
  --mvt-grad-tile-teal: linear-gradient(150deg, #e9fbf5, #cdf2e6);
  --mvt-grad-tile-coral: linear-gradient(150deg, #fff1ea, #ffe0d2);
  --mvt-grad-tile-gold: linear-gradient(150deg, #fff8e6, #ffedc2);

  /* Radien */
  --mvt-radius-xs: 8px;
  --mvt-radius-sm: 12px;
  --mvt-radius: 18px;
  --mvt-radius-lg: 24px;
  --mvt-radius-pill: 999px;

  /* Schatten */
  --mvt-shadow-xs: 0 1px 2px rgba(10, 59, 55, 0.06);
  --mvt-shadow-sm: 0 1px 2px rgba(10, 59, 55, 0.05), 0 6px 18px -10px rgba(10, 59, 55, 0.16);
  --mvt-shadow-md: 0 2px 4px rgba(10, 59, 55, 0.04), 0 14px 34px -14px rgba(10, 59, 55, 0.24);
  --mvt-shadow-lg: 0 30px 70px -30px rgba(10, 59, 55, 0.42);
  --mvt-shadow-accent: 0 12px 26px -12px rgba(240, 93, 58, 0.65);
  --mvt-shadow-primary: 0 12px 26px -12px rgba(13, 148, 136, 0.6);
  --mvt-focus-ring: 0 0 0 4px rgba(13, 148, 136, 0.18);
  --mvt-shadow-gold: 0 12px 26px -12px rgba(201, 138, 4, 0.6);
  --mvt-shadow-mark: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  --mvt-glass-bg: rgba(255, 255, 255, 0.92);

  /* Schrift */
  --mvt-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mvt-display: "Manrope", var(--mvt-sans);
  --mvt-fs-xs: 0.75rem;
  --mvt-fs-sm: 0.8125rem;
  --mvt-fs-base: 0.9375rem;
  --mvt-fs-md: 1.0625rem;
  --mvt-fs-lg: 1.25rem;
  /* Feste Stufen statt fließender Größen (Ronny 2026-10-12); Smartphone-Stufe unten. */
  --mvt-fs-xl: 2rem;
  --mvt-fs-2xl: 2.5rem;

  /* Abstände */
  --mvt-space-1: 4px;
  --mvt-space-2: 8px;
  --mvt-space-3: 12px;
  --mvt-space-4: 16px;
  --mvt-space-5: 20px;
  --mvt-space-6: 24px;
  --mvt-space-8: 32px;
  --mvt-space-10: 40px;
  --mvt-gutter: clamp(16px, 3vw, 40px);

  /* Bewegung */
  --mvt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mvt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mvt-dur-fast: 140ms;
  --mvt-dur: 240ms;
  --mvt-dur-slow: 480ms;

  /* Shell-Maße */
  --mvt-sidebar-width: 264px;
  /* Einheitliche Breite aller seitlichen Drawer (Formulare, Konfiguration, Block-Inspektor). */
  --mvt-drawer-width: min(520px, 100vw);
  --mvt-drawer-gap: 10px;              /* Abstand des schwebenden Drawers zum Fensterrand */
  --mvt-topbar-height: 60px;
  --mvt-tabbar-height: 64px;
}

@media (max-width: 768px) {
  :root {
    --mvt-fs-xl: 1.5rem;
    --mvt-fs-2xl: 1.75rem;
  }
}