/* ══════════════════════════════════════════════════════════════════
       Reißbrett – Design-System-Tokens (aus Claude Design/ds-industry.css
       übernommen, Fonts selbst gehostet statt per Google-Fonts-@import,
       damit die bestehende strikte CSP unangetastet bleibt). Alte
       Variablen (--bg, --surface, ...) bleiben vorerst parallel bestehen,
       solange Kalender/Detail/Settings noch nicht auf die neuen Tokens
       migriert sind (schrittweiser Umbau).
       ══════════════════════════════════════════════════════════════════ */
    @font-face {
      font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
      src: url('/fonts/barlow-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
      src: url('/fonts/barlow-500.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
      src: url('/fonts/barlow-700.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap;
      src: url('/fonts/barlow-condensed-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
      src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
    }

    :root {
      --color-bg: #f2f2f3;
      --color-surface: #e9e9ea;
      --color-text: #1d1f20;
      --color-accent: #5980a6;
      --color-accent-2: #728fab;

      --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7;
      --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d;
      --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d;

      --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd;
      --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3;
      --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d;

      --color-accent-2-100: #eef6ff; --color-accent-2-200: #d6ebff; --color-accent-2-300: #bdd8f2;
      --color-accent-2-400: #9ebbd8; --color-accent-2-500: #7e9cb8; --color-accent-2-600: #627d98;
      --color-accent-2-700: #486077; --color-accent-2-800: #314457; --color-accent-2-900: #1f2d3a;

      /* Abgeleitete Rollen statt wiederholter color-mix()-Literale – flippen
         automatisch mit, weil sie auf --color-text/--color-bg verweisen. */
      --color-text-muted: color-mix(in srgb, var(--color-text) 58%, transparent);
      --color-text-faint: color-mix(in srgb, var(--color-text) 42%, transparent);
      --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);
      --color-divider-soft: color-mix(in srgb, var(--color-text) 9%, transparent);

      --font-heading: 'Barlow Condensed', system-ui, sans-serif;
      --font-heading-weight: 600;
      --font-body: 'Barlow', system-ui, sans-serif;

      --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px;
      --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px;
      --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px;

      --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
      --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
      --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

      /* Legacy – von Kalender/Detail/Settings noch benötigt, bis diese
         Bereiche in den nächsten Meilensteinen auf die Tokens oben
         migriert sind. Fest verdrahtet (nicht theme-abhängig), damit
         diese Bereiche bis zur Migration unverändert aussehen. */
      --bg: #0f172a;
      --surface: #1e293b;
      --surface2: #334155;
      --border: #334155;
      --border2: #475569;
      --text: #f1f5f9;
      --text-muted: #94a3b8;
      --accent: #3b82f6;
      --hour-h: 64px;
      --time-w: 52px;

      /* Horizontales (Laufband) Kalender-Layout: zwei feste Kopfspalten
         (Tag, Location), an denen sich auch die Stunden-Achse ausrichtet. */
      --hz-day-w: 90px;
      --hz-loc-w: 130px;
    }

    /* Dark: dieselben Rollen, andere Ramp-Stufe – kein zweites Design,
       nur die vorhandene Accent-Ramp umgekehrt genutzt (accent-900 als
       Grund, accent-400 als Akzent-auf-Dunkel, accent-100 als Text). */
    :root[data-theme="dark"] {
      --color-bg: var(--color-accent-900);
      --color-surface: var(--color-accent-800);
      --color-text: var(--color-accent-100);
      --color-accent: var(--color-accent-400);
      --color-accent-2: var(--color-accent-2-400);
      --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
      --shadow-md: 0 3px 10px rgba(0,0,0,.4);
      --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
    }