/*
 * Default-Theme: neutral, markenfrei. Definiert ALLE Design-Tokens.
 *
 * Hell auf :root, Dunkel zweimal identisch: einmal für die Systemeinstellung
 * (@media), einmal für die manuelle Wahl (data-color-scheme="dark").
 * Andere Themes überschreiben einzelne Tokens unter :root[data-theme="<name>"].
 */
:root {
  color-scheme: light;

  /* Flächen */
  --color-canvas: #ffffff;
  --color-sidebar: #f7f7f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f3f5;
  --color-surface-hover: #eeeef1;
  --color-surface-active: #e7e7ec;
  --color-border: #e6e6eb;
  --color-border-strong: #d3d3db;
  --color-border-input: #8c8c97;
  --color-overlay: rgb(12 12 16 / 0.35);

  /* Text */
  --color-text: #18181b;
  --color-text-muted: #5d5d69;
  --color-heading: #0b0b0e;

  /* Akzent (Links, Fokus, aktive Elemente) */
  --color-accent: #5145e5;
  --color-accent-hover: #4338ca;
  --color-accent-subtle: #eeedfd;
  --color-accent-text: #3a2fb5;
  --color-focus: #5145e5;
  --color-focus-ring: rgb(81 69 229 / 0.28);

  /* Hauptaktion */
  --color-primary: #18181b;
  --color-primary-hover: #34343b;
  --color-primary-contrast: #ffffff;

  /* Status */
  --color-danger: #b42318;
  --color-danger-surface: #fef0ee;
  --color-warning-text: #774900;
  --color-warning-surface: #fdf3dc;
  --color-success: #13693f;
  --color-success-surface: #e8f5ee;
  --color-info-text: #1d4d87;
  --color-info-surface: #eaf2fc;

  /* QR-Code bleibt immer dunkel auf hell (Scanner) */
  --color-qr-fg: #000000;
  --color-qr-bg: #ffffff;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgb(16 16 24 / 0.05);
  --shadow-md: 0 1px 2px rgb(16 16 24 / 0.04), 0 6px 20px rgb(16 16 24 / 0.06);
  --shadow-lg: 0 2px 6px rgb(16 16 24 / 0.06), 0 18px 48px rgb(16 16 24 / 0.12);

  /* Typografie */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 2.125rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --letter-spacing-tight: -0.02em;
  --line-height: 1.6;
  --line-height-tight: 1.25;

  /* Form */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --logo-height: 28px;

  /* Abstände und Maße */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --sidebar-width: 264px;
  --content-width: 1040px;
  --reading-width: 720px;
  --auth-width: 380px;
  --control-height: 40px;
  --control-height-sm: 32px;

  /* Bewegung */
  --duration: 140ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    color-scheme: dark;
    --color-canvas: #161618;
    --color-sidebar: #111113;
    --color-surface: #1c1c1f;
    --color-surface-muted: #232327;
    --color-surface-hover: #29292e;
    --color-surface-active: #313137;
    --color-border: #2c2c32;
    --color-border-strong: #3b3b43;
    --color-border-input: #6f6f7b;
    --color-overlay: rgb(0 0 0 / 0.55);
    --color-text: #ececf1;
    --color-text-muted: #a3a3ae;
    --color-heading: #fafafa;
    --color-accent: #9d97ff;
    --color-accent-hover: #b7b2ff;
    --color-accent-subtle: #27254a;
    --color-accent-text: #cdc9ff;
    --color-focus: #9d97ff;
    --color-focus-ring: rgb(157 151 255 / 0.35);
    --color-primary: #f4f4f5;
    --color-primary-hover: #d8d8de;
    --color-primary-contrast: #18181b;
    --color-danger: #ff9187;
    --color-danger-surface: #3a1714;
    --color-warning-text: #f2c46a;
    --color-warning-surface: #33270d;
    --color-success: #72d6a2;
    --color-success-surface: #11301f;
    --color-info-text: #90c3ff;
    --color-info-surface: #13273f;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
  }
}

:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --color-canvas: #161618;
  --color-sidebar: #111113;
  --color-surface: #1c1c1f;
  --color-surface-muted: #232327;
  --color-surface-hover: #29292e;
  --color-surface-active: #313137;
  --color-border: #2c2c32;
  --color-border-strong: #3b3b43;
  --color-border-input: #6f6f7b;
  --color-overlay: rgb(0 0 0 / 0.55);
  --color-text: #ececf1;
  --color-text-muted: #a3a3ae;
  --color-heading: #fafafa;
  --color-accent: #9d97ff;
  --color-accent-hover: #b7b2ff;
  --color-accent-subtle: #27254a;
  --color-accent-text: #cdc9ff;
  --color-focus: #9d97ff;
  --color-focus-ring: rgb(157 151 255 / 0.35);
  --color-primary: #f4f4f5;
  --color-primary-hover: #d8d8de;
  --color-primary-contrast: #18181b;
  --color-danger: #ff9187;
  --color-danger-surface: #3a1714;
  --color-warning-text: #f2c46a;
  --color-warning-surface: #33270d;
  --color-success: #72d6a2;
  --color-success-surface: #11301f;
  --color-info-text: #90c3ff;
  --color-info-surface: #13273f;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
}