/* dashboard/static/dashboard/ds-tokens.css — GENERATED, do not edit by hand.
 *
 * The shared Talvesa design system's plain-CSS token export, vendored.
 *
 * SOURCE: pablo-roso/style_guide, packages/tokens/export/dist/tokens.css
 *         (derived there from packages/tokens/src/ds.config.ts)
 *
 * WHY VENDORED INSTEAD OF INSTALLED: style_guide is a pnpm/vanilla-extract
 * React workspace (@talvesa/tokens) — this app is server-rendered Django
 * with no npm/bundler pipeline at all, so `pnpm add` isn't an option here.
 * style_guide's own docs/token-export.md exists for exactly this situation
 * ("tokens.css — Reines CSS, Fremdprojekte"): a plain-CSS export with STABLE
 * --talvesa-* names, independent of vanilla-extract's internal hashed
 * ones. See panel.css's own header for how the rest of this app consumes it.
 *
 * To pick up a style_guide token change:
 *   ./scripts/sync-design-tokens.sh [path/to/style_guide]
 *
 * Editing a value here is lost on the next sync and, worse, silently
 * disagrees with the system every other surface is built against. One thing
 * the script cannot do for you: a RENAMED or REMOVED token also needs the
 * :root adapter block in panel.css updated — a var() with no fallback
 * resolves to nothing at all, it does not fall back to anything.
 */

/* Automatisch erzeugt von packages/tokens/export/build.mjs — NICHT von Hand bearbeiten. */
/*
 * Namensschema: --talvesa-<gruppe>-<pfad>.
 * Diese Namen sind STABIL und unabhängig von den gehashten Namen, die
 * vanilla-extract für den Theme-Contract erzeugt. React-Komponenten stylen
 * gegen den Contract, alles außerhalb (Tailwind, reines CSS, Doku) gegen diese Namen.
 *
 * Dark Mode: automatisch über prefers-color-scheme, manuell über
 * [data-theme="dark"] / [data-theme="light"] (überstimmt die Systemeinstellung).
 */

:root {
  /* ── Primitive ─────────────────────────────────────────── */
  /* Graustufen-Palette. Basis für Flächen, Text und Trenner. */
  --talvesa-color-neutral-0: #FFFFFF;
  --talvesa-color-neutral-50: #F7F7F8;
  --talvesa-color-neutral-100: #EFEFF2;
  --talvesa-color-neutral-200: #E3E3E7;
  --talvesa-color-neutral-300: #D1D1D6;
  --talvesa-color-neutral-400: #AEAEB4;
  --talvesa-color-neutral-500: #8E8E93;
  --talvesa-color-neutral-600: #6C6C70;
  --talvesa-color-neutral-700: #48484A;
  --talvesa-color-neutral-800: #2C2C2E;
  --talvesa-color-neutral-900: #1C1C1E;
  --talvesa-color-neutral-950: #0C0C0D;
  --talvesa-color-neutral-1000: #000000;
  --talvesa-color-accent-base: #3D5AFE;
  --talvesa-color-accent-dark: #4A66FF;
  --talvesa-color-accent-text: #8A9CFF;
  --talvesa-color-accent-on: #FFFFFF;
  --talvesa-color-accent-on-dark: #FFFFFF;
  --talvesa-color-status-red: #FF3B30;
  --talvesa-color-status-orange: #FF9500;
  --talvesa-color-status-yellow: #FFCC00;
  --talvesa-color-status-green: #34C759;
  --talvesa-color-status-teal: #30B0C7;

  /* Abstandsskala in px. Nicht-linear, ab Stufe 7 in 8er-Schritten. */
  --talvesa-space-0: 0px;
  --talvesa-space-1: 2px;
  --talvesa-space-2: 4px;
  --talvesa-space-3: 8px;
  --talvesa-space-4: 12px;
  --talvesa-space-5: 16px;
  --talvesa-space-6: 20px;
  --talvesa-space-7: 24px;
  --talvesa-space-8: 32px;
  --talvesa-space-9: 40px;
  --talvesa-space-10: 48px;
  --talvesa-space-11: 64px;
  --talvesa-space-12: 80px;

  /* Eckenradien. Alle Werte werden mit shape.radiusScale multipliziert. */
  --talvesa-radius-sm: 8px;
  --talvesa-radius-md: 12px;
  --talvesa-radius-lg: 16px;
  --talvesa-radius-xl: 22px;
  --talvesa-radius-2xl: 28px;
  --talvesa-radius-full: 999px;

  /* UI-Schriftfamilie. Systemschrift-Stack, keine Webfont-Ladezeit. */
  --talvesa-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --talvesa-font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --talvesa-font-size-xs: 12px;
  --talvesa-font-size-sm: 13.01px;
  --talvesa-font-size-base: 15px;
  --talvesa-font-size-md: 17px;
  --talvesa-font-size-lg: 20px;
  --talvesa-font-size-xl: 24px;
  --talvesa-font-size-2xl: 32px;
  --talvesa-font-size-3xl: 40px;
  --talvesa-font-weight-regular: 400;
  --talvesa-font-weight-medium: 500;
  --talvesa-font-weight-semibold: 600;
  --talvesa-font-weight-bold: 700;
  --talvesa-font-line-height-tight: 1.15;
  --talvesa-font-line-height-base: 1.4;
  --talvesa-font-line-height-relaxed: 1.6;

  /* Animationsdauern. Werden mit motion.speed multipliziert. */
  --talvesa-motion-duration-fast: 150ms;
  --talvesa-motion-duration-base: 250ms;
  --talvesa-motion-duration-slow: 400ms;
  --talvesa-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --talvesa-motion-easing-apple-out: cubic-bezier(0.32, 0.72, 0, 1);

  /* Stapelreihenfolge. Lücken von 100 lassen Platz für Zwischenebenen. */
  --talvesa-z-index-base: 0;
  --talvesa-z-index-dropdown: 100;
  --talvesa-z-index-sticky: 200;
  --talvesa-z-index-overlay: 300;
  --talvesa-z-index-modal: 400;
  --talvesa-z-index-toast: 500;
  --talvesa-z-index-tooltip: 600;

  /* ── Semantik (Light) ──────────────────────────────────── */
  --talvesa-color-label-primary: #1C1C1E;
  --talvesa-color-label-secondary: #6C6C70;
  --talvesa-color-label-tertiary: #8E8E93;
  --talvesa-color-label-quaternary: #AEAEB4;
  --talvesa-color-background-primary: #FFFFFF;
  --talvesa-color-background-secondary: #F7F7F8;
  --talvesa-color-background-tertiary: #EFEFF2;
  --talvesa-color-background-grouped: #F7F7F8;
  --talvesa-color-background-elevated: #FFFFFF;
  --talvesa-color-fill-primary: #E3E3E7;
  --talvesa-color-fill-secondary: #EFEFF2;
  --talvesa-color-fill-tertiary: #F7F7F8;
  --talvesa-color-separator: #D1D1D6;
  --talvesa-color-accent: #3D5AFE;
  --talvesa-color-accent-text: #3D5AFE;
  --talvesa-color-on-accent: #FFFFFF;
  --talvesa-color-scrim: rgba(0, 0, 0, 0.42);
  --talvesa-color-control-thumb: #FFFFFF;
  --talvesa-color-status-danger: #FF3B30;
  --talvesa-color-status-warning: #FF9500;
  --talvesa-color-status-success: #34C759;
  --talvesa-color-status-info: #30B0C7;
  --talvesa-color-status-text-danger: #B3261E;
  --talvesa-color-status-text-warning: #8A6100;
  --talvesa-color-status-text-success: #1B7F3B;
  --talvesa-color-status-text-info: #0E6E7F;
  --talvesa-color-chart-1: #1F4E85;
  --talvesa-color-chart-2: #873FA6;
  --talvesa-color-chart-3: #C3396B;
  --talvesa-color-chart-4: #AE6A2E;
  --talvesa-color-chart-5: #289675;
  --talvesa-color-chart-6: #6B9C34;
  --talvesa-glass-tint: 255,255,255;
  --talvesa-glass-opacity-thin: 0.4;
  --talvesa-glass-opacity-regular: 0.55;
  --talvesa-glass-opacity-thick: 0.75;
  --talvesa-glass-blur-thin: 12px;
  --talvesa-glass-blur-regular: 20px;
  --talvesa-glass-blur-thick: 36px;
  --talvesa-glass-saturation-thin: 160%;
  --talvesa-glass-saturation-regular: 180%;
  --talvesa-glass-saturation-thick: 190%;
  --talvesa-glass-border-color: rgba(255, 255, 255, 0.6);
  --talvesa-glass-highlight: rgba(255, 255, 255, 0.35);
  --talvesa-glass-fallback: #F7F7F8;
  --talvesa-shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --talvesa-shadow-2: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --talvesa-shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --talvesa-shadow-4: 0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --talvesa-color-label-primary: #FFFFFF;
    --talvesa-color-label-secondary: #AEAEB4;
    --talvesa-color-label-tertiary: #8E8E93;
    --talvesa-color-label-quaternary: #6C6C70;
    --talvesa-color-background-primary: #000000;
    --talvesa-color-background-secondary: #0C0C0D;
    --talvesa-color-background-tertiary: #1C1C1E;
    --talvesa-color-background-grouped: #0C0C0D;
    --talvesa-color-background-elevated: #2C2C2E;
    --talvesa-color-fill-primary: #48484A;
    --talvesa-color-fill-secondary: #2C2C2E;
    --talvesa-color-fill-tertiary: #1C1C1E;
    --talvesa-color-separator: #48484A;
    --talvesa-color-accent: #4A66FF;
    --talvesa-color-accent-text: #8A9CFF;
    --talvesa-color-on-accent: #FFFFFF;
    --talvesa-color-scrim: rgba(0, 0, 0, 0.6);
    --talvesa-color-control-thumb: #FFFFFF;
    --talvesa-color-status-danger: #FF3B30;
    --talvesa-color-status-warning: #FF9500;
    --talvesa-color-status-success: #34C759;
    --talvesa-color-status-info: #30B0C7;
    --talvesa-color-status-text-danger: #FF6961;
    --talvesa-color-status-text-warning: #FFB340;
    --talvesa-color-status-text-success: #30D158;
    --talvesa-color-status-text-info: #40C8E0;
    --talvesa-color-chart-1: #3082E0;
    --talvesa-color-chart-2: #BE7ADB;
    --talvesa-color-chart-3: #E889AB;
    --talvesa-color-chart-4: #E6A871;
    --talvesa-color-chart-5: #39DCAB;
    --talvesa-color-chart-6: #B0E07A;
    --talvesa-glass-tint: 30,30,32;
    --talvesa-glass-opacity-thin: 0.4;
    --talvesa-glass-opacity-regular: 0.55;
    --talvesa-glass-opacity-thick: 0.75;
    --talvesa-glass-blur-thin: 12px;
    --talvesa-glass-blur-regular: 20px;
    --talvesa-glass-blur-thick: 36px;
    --talvesa-glass-saturation-thin: 160%;
    --talvesa-glass-saturation-regular: 180%;
    --talvesa-glass-saturation-thick: 190%;
    --talvesa-glass-border-color: rgba(255, 255, 255, 0.12);
    --talvesa-glass-highlight: rgba(255, 255, 255, 0.08);
    --talvesa-glass-fallback: #2C2C2E;
    --talvesa-shadow-1: 0 1px 2px rgba(0,0,0,0.3);
    --talvesa-shadow-2: 0 2px 8px rgba(0,0,0,0.36);
    --talvesa-shadow-3: 0 8px 24px rgba(0,0,0,0.45);
    --talvesa-shadow-4: 0 16px 48px rgba(0,0,0,0.55);
  }
}

[data-theme="dark"] {
  --talvesa-color-label-primary: #FFFFFF;
  --talvesa-color-label-secondary: #AEAEB4;
  --talvesa-color-label-tertiary: #8E8E93;
  --talvesa-color-label-quaternary: #6C6C70;
  --talvesa-color-background-primary: #000000;
  --talvesa-color-background-secondary: #0C0C0D;
  --talvesa-color-background-tertiary: #1C1C1E;
  --talvesa-color-background-grouped: #0C0C0D;
  --talvesa-color-background-elevated: #2C2C2E;
  --talvesa-color-fill-primary: #48484A;
  --talvesa-color-fill-secondary: #2C2C2E;
  --talvesa-color-fill-tertiary: #1C1C1E;
  --talvesa-color-separator: #48484A;
  --talvesa-color-accent: #4A66FF;
  --talvesa-color-accent-text: #8A9CFF;
  --talvesa-color-on-accent: #FFFFFF;
  --talvesa-color-scrim: rgba(0, 0, 0, 0.6);
  --talvesa-color-control-thumb: #FFFFFF;
  --talvesa-color-status-danger: #FF3B30;
  --talvesa-color-status-warning: #FF9500;
  --talvesa-color-status-success: #34C759;
  --talvesa-color-status-info: #30B0C7;
  --talvesa-color-status-text-danger: #FF6961;
  --talvesa-color-status-text-warning: #FFB340;
  --talvesa-color-status-text-success: #30D158;
  --talvesa-color-status-text-info: #40C8E0;
  --talvesa-color-chart-1: #3082E0;
  --talvesa-color-chart-2: #BE7ADB;
  --talvesa-color-chart-3: #E889AB;
  --talvesa-color-chart-4: #E6A871;
  --talvesa-color-chart-5: #39DCAB;
  --talvesa-color-chart-6: #B0E07A;
  --talvesa-glass-tint: 30,30,32;
  --talvesa-glass-opacity-thin: 0.4;
  --talvesa-glass-opacity-regular: 0.55;
  --talvesa-glass-opacity-thick: 0.75;
  --talvesa-glass-blur-thin: 12px;
  --talvesa-glass-blur-regular: 20px;
  --talvesa-glass-blur-thick: 36px;
  --talvesa-glass-saturation-thin: 160%;
  --talvesa-glass-saturation-regular: 180%;
  --talvesa-glass-saturation-thick: 190%;
  --talvesa-glass-border-color: rgba(255, 255, 255, 0.12);
  --talvesa-glass-highlight: rgba(255, 255, 255, 0.08);
  --talvesa-glass-fallback: #2C2C2E;
  --talvesa-shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --talvesa-shadow-2: 0 2px 8px rgba(0,0,0,0.36);
  --talvesa-shadow-3: 0 8px 24px rgba(0,0,0,0.45);
  --talvesa-shadow-4: 0 16px 48px rgba(0,0,0,0.55);
}

[data-theme="light"] {
  --talvesa-color-label-primary: #1C1C1E;
  --talvesa-color-label-secondary: #6C6C70;
  --talvesa-color-label-tertiary: #8E8E93;
  --talvesa-color-label-quaternary: #AEAEB4;
  --talvesa-color-background-primary: #FFFFFF;
  --talvesa-color-background-secondary: #F7F7F8;
  --talvesa-color-background-tertiary: #EFEFF2;
  --talvesa-color-background-grouped: #F7F7F8;
  --talvesa-color-background-elevated: #FFFFFF;
  --talvesa-color-fill-primary: #E3E3E7;
  --talvesa-color-fill-secondary: #EFEFF2;
  --talvesa-color-fill-tertiary: #F7F7F8;
  --talvesa-color-separator: #D1D1D6;
  --talvesa-color-accent: #3D5AFE;
  --talvesa-color-accent-text: #3D5AFE;
  --talvesa-color-on-accent: #FFFFFF;
  --talvesa-color-scrim: rgba(0, 0, 0, 0.42);
  --talvesa-color-control-thumb: #FFFFFF;
  --talvesa-color-status-danger: #FF3B30;
  --talvesa-color-status-warning: #FF9500;
  --talvesa-color-status-success: #34C759;
  --talvesa-color-status-info: #30B0C7;
  --talvesa-color-status-text-danger: #B3261E;
  --talvesa-color-status-text-warning: #8A6100;
  --talvesa-color-status-text-success: #1B7F3B;
  --talvesa-color-status-text-info: #0E6E7F;
  --talvesa-color-chart-1: #1F4E85;
  --talvesa-color-chart-2: #873FA6;
  --talvesa-color-chart-3: #C3396B;
  --talvesa-color-chart-4: #AE6A2E;
  --talvesa-color-chart-5: #289675;
  --talvesa-color-chart-6: #6B9C34;
  --talvesa-glass-tint: 255,255,255;
  --talvesa-glass-opacity-thin: 0.4;
  --talvesa-glass-opacity-regular: 0.55;
  --talvesa-glass-opacity-thick: 0.75;
  --talvesa-glass-blur-thin: 12px;
  --talvesa-glass-blur-regular: 20px;
  --talvesa-glass-blur-thick: 36px;
  --talvesa-glass-saturation-thin: 160%;
  --talvesa-glass-saturation-regular: 180%;
  --talvesa-glass-saturation-thick: 190%;
  --talvesa-glass-border-color: rgba(255, 255, 255, 0.6);
  --talvesa-glass-highlight: rgba(255, 255, 255, 0.35);
  --talvesa-glass-fallback: #F7F7F8;
  --talvesa-shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --talvesa-shadow-2: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --talvesa-shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --talvesa-shadow-4: 0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
}