/**
 * Vernetzt Leipzig Design Tokens
 * Version: 1.2.1
 *
 * Dark Mode ist die Standardeinstellung. Alle öffentlichen Variablen tragen
 * den Namensraum `--vl-`, damit sie gefahrlos in bestehende Apps eingebunden
 * werden können. Komponenten verwenden ausschließlich semantische Tokens.
 *
 * Die UI-Schrift (Noto Sans, selbst gehostet) wird per @font-face aus dem
 * Ordner `fonts/` geladen — keine externen Font-CDNs.
 */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/noto-sans-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/noto-sans-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/noto-sans-latin-600-normal.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/noto-sans-latin-700-normal.woff2") format("woff2");
  font-display: swap;
}

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

  /* Typografie */
  --vl-font-family-ui: "Noto Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vl-font-family-display: Georgia, "Times New Roman", serif;
  --vl-font-size-2xs: 0.6875rem; /* 11 px */
  --vl-font-size-xs: 0.75rem; /* 12 px */
  --vl-font-size-sm: 0.8125rem; /* 13 px */
  --vl-font-size-md: 0.875rem; /* 14 px */
  --vl-font-size-lg: 1rem; /* 16 px */
  --vl-font-size-xl: 1.125rem; /* 18 px */
  --vl-font-size-2xl: 1.5rem; /* 24 px */
  --vl-font-size-3xl: 2rem; /* 32 px */
  --vl-font-size-4xl: 2.6875rem; /* 43 px */
  --vl-font-weight-regular: 400;
  --vl-font-weight-medium: 500;
  --vl-font-weight-semibold: 600;
  --vl-font-weight-bold: 700;
  --vl-line-height-tight: 1.2;
  --vl-line-height-body: 1.5;
  --vl-line-height-reading: 1.65;
  --vl-letter-spacing-display: -0.035em;
  --vl-letter-spacing-eyebrow: 0.12em;

  /* 4-px-Abstandsraster */
  --vl-space-0: 0;
  --vl-space-1: 0.25rem; /* 4 px */
  --vl-space-2: 0.5rem; /* 8 px */
  --vl-space-3: 0.75rem; /* 12 px */
  --vl-space-4: 1rem; /* 16 px */
  --vl-space-5: 1.25rem; /* 20 px */
  --vl-space-6: 1.5rem; /* 24 px */
  --vl-space-8: 2rem; /* 32 px */
  --vl-space-10: 2.5rem; /* 40 px */
  --vl-space-12: 3rem; /* 48 px */
  --vl-space-16: 4rem; /* 64 px */

  /* Maße */
  --vl-size-control: 2.625rem; /* 42 px */
  --vl-size-control-compact: 2.125rem; /* 34 px */
  --vl-size-icon: 1rem; /* 16 px */
  --vl-size-icon-button: 2.625rem; /* 42 px */
  --vl-size-dialog-close: 2.375rem; /* 38 px */
  --vl-size-header-legal: 3.0625rem; /* 49 px */
  --vl-size-footer-legal: 2.625rem; /* 42 px */
  --vl-size-navigation-desktop: 15rem; /* 240 px */
  --vl-size-navigation-mobile: 4rem; /* 64 px + Safe Area */

  /* Radien */
  --vl-radius-xs: 0.375rem; /* 6 px */
  --vl-radius-sm: 0.5rem; /* 8 px */
  --vl-radius-control: 0.625rem; /* 10 px */
  --vl-radius-card: 1rem; /* 16 px */
  --vl-radius-card-large: 1.25rem; /* 20 px */
  --vl-radius-auth: 1.375rem; /* 22 px */
  --vl-radius-round: 9999px;

  /* Inhaltsbreiten */
  --vl-width-compact: 27.5rem; /* 440 px */
  --vl-width-dialog: 38.75rem; /* 620 px */
  --vl-width-legal: 51.25rem; /* 820 px */
  --vl-width-dashboard: 64rem; /* 1024 px */
  --vl-width-data: 87.5rem; /* 1400 px */

  /* Bewegung und Ebenen */
  --vl-duration-fast: 120ms;
  --vl-duration-normal: 180ms;
  --vl-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --vl-z-navigation: 20;
  --vl-z-overlay: 40;
  --vl-z-dialog: 50;
  --vl-z-toast: 60;

  /* Semantische Farben – Dark Mode */
  --vl-color-background: #101612;
  --vl-color-foreground: #eaf0eb;
  --vl-color-surface: #171f1a;
  --vl-color-surface-raised: #1b241e;
  --vl-color-surface-muted: #202923;
  --vl-color-surface-subtle: #1d2721;
  --vl-color-surface-hover: #29352e;
  --vl-color-surface-selected: #213129;
  --vl-color-navigation: #141c17;
  --vl-color-foreground-muted: #b6c2b9;
  --vl-color-primary: #65aa94;
  --vl-color-on-primary: #0d1915;
  --vl-color-primary-strong: #4c8e79;
  --vl-color-primary-muted: #20392f;
  --vl-color-secondary: #222d26;
  --vl-color-on-secondary: #dce7df;
  --vl-color-border: #344139;
  --vl-color-border-soft: #2a352e;
  --vl-color-input-border: #3c4a41;
  --vl-color-focus: #487b6a;
  --vl-color-destructive: #e59a90;
  --vl-color-on-destructive: #190b09;

  /* Statusfarben – immer mit Text oder Icon verwenden */
  --vl-color-info: #9bc2ec;
  --vl-color-info-surface: #203448;
  --vl-color-warning: #e5ca72;
  --vl-color-warning-surface: #3b3318;
  --vl-color-success: #91c5a4;
  --vl-color-success-surface: #20392d;
  --vl-color-error: #e59a90;
  --vl-color-error-surface: #402725;

  /* Effekte */
  --vl-shadow-card: 0 4px 18px rgb(0 0 0 / 0.14);
  --vl-shadow-floating: 0 18px 55px rgb(0 0 0 / 0.28);
  --vl-overlay: rgb(9 18 14 / 0.5);
  --vl-glow-auth: radial-gradient(
    circle at 80% 0%,
    color-mix(in srgb, var(--vl-color-primary) 12%, transparent),
    transparent 33rem
  );
}

:root[data-theme="light"] {
  color-scheme: light;
  --vl-color-background: #f6f6f0;
  --vl-color-foreground: #19372f;
  --vl-color-surface: #fffefa;
  --vl-color-surface-raised: #fffefa;
  --vl-color-surface-muted: #eff2ed;
  --vl-color-surface-subtle: #f7f8f5;
  --vl-color-surface-hover: #e6ebe4;
  --vl-color-surface-selected: #edf5ee;
  --vl-color-navigation: #f1f3eb;
  --vl-color-foreground-muted: #4c6059;
  --vl-color-primary: #1f5d50;
  --vl-color-on-primary: #fffefa;
  --vl-color-primary-strong: #16463c;
  --vl-color-primary-muted: #d9ece0;
  --vl-color-secondary: #edf1eb;
  --vl-color-on-secondary: #27473e;
  --vl-color-border: #dfe5dc;
  --vl-color-border-soft: #edf0eb;
  --vl-color-input-border: #d4ddd5;
  --vl-color-focus: #b9ddca;
  --vl-color-destructive: #a64336;
  --vl-color-on-destructive: #fffefa;
  --vl-color-info: #3269ad;
  --vl-color-info-surface: #dceafa;
  --vl-color-warning: #8a6800;
  --vl-color-warning-surface: #fff1bd;
  --vl-color-success: #39715b;
  --vl-color-success-surface: #e5f1e8;
  --vl-color-error: #a64336;
  --vl-color-error-surface: #f8ded8;
  --vl-shadow-card: 0 4px 18px rgb(25 50 45 / 0.04);
  --vl-shadow-floating: 0 12px 35px rgb(25 50 45 / 0.1);
  --vl-overlay: rgb(25 55 47 / 0.46);
}

/* „System“ ist opt-in; ohne gespeicherte Auswahl bleibt Dark Mode aktiv. */
:root[data-theme="system"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --vl-color-background: #f6f6f0;
    --vl-color-foreground: #19372f;
    --vl-color-surface: #fffefa;
    --vl-color-surface-raised: #fffefa;
    --vl-color-surface-muted: #eff2ed;
    --vl-color-surface-subtle: #f7f8f5;
    --vl-color-surface-hover: #e6ebe4;
    --vl-color-surface-selected: #edf5ee;
    --vl-color-navigation: #f1f3eb;
    --vl-color-foreground-muted: #4c6059;
    --vl-color-primary: #1f5d50;
    --vl-color-on-primary: #fffefa;
    --vl-color-primary-strong: #16463c;
    --vl-color-primary-muted: #d9ece0;
    --vl-color-secondary: #edf1eb;
    --vl-color-on-secondary: #27473e;
    --vl-color-border: #dfe5dc;
    --vl-color-border-soft: #edf0eb;
    --vl-color-input-border: #d4ddd5;
    --vl-color-focus: #b9ddca;
    --vl-color-destructive: #a64336;
    --vl-color-on-destructive: #fffefa;
    --vl-color-info: #3269ad;
    --vl-color-info-surface: #dceafa;
    --vl-color-warning: #8a6800;
    --vl-color-warning-surface: #fff1bd;
    --vl-color-success: #39715b;
    --vl-color-success-surface: #e5f1e8;
    --vl-color-error: #a64336;
    --vl-color-error-surface: #f8ded8;
    --vl-shadow-card: 0 4px 18px rgb(25 50 45 / 0.04);
    --vl-shadow-floating: 0 12px 35px rgb(25 50 45 / 0.1);
    --vl-overlay: rgb(25 55 47 / 0.46);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vl-duration-fast: 0ms;
    --vl-duration-normal: 0ms;
  }
}