/* Ein Ort fuer Farben, Schrift, Abstaende, Radien und Schatten -- umstellen
   nur hier. Die Werte sind 1:1 die der Haupt-App (WEBAPP/src/Assets/
   style.css: --rw-global-bg, --rw-hf-bg, --rw-hf-border, --rw-list-item-bg,
   --rw-title-color, --rw-text-color, --text-color-secondary, Radien,
   Schatten) und des Admin-Panels (adminApp/src/assets/base.css) -- eine
   Optik fuer Website, App und Admin.

   Die Akzentfarbe kommt vom Server (websiteGatePages.js "brandingStyle",
   setzt --color-accent/-hover per !important). Hover-/Toenungen deshalb aus
   --color-accent abgeleitet (--color-accent-strong/-soft), nicht aus
   --color-accent-hover. */
:root {
  color-scheme: light;

  --color-bg: #f6f6f7;
  --color-card: #ffffff;
  --color-surface-2: #f4f4f5;
  --color-border: #e6e6e9;
  --color-fg: #09090b;
  --color-text: #27272a;
  --color-muted: #63636b;

  --color-accent: #6366f1;
  --color-accent-hover: #4f52e0;
  --color-accent-strong: color-mix(in srgb, var(--color-accent) 84%, #000);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --color-on-accent: #ffffff;
  --color-focus: var(--color-accent);

  --color-error: #dc2626;
  --color-success: #15803d;
  --color-warning: #b45309;

  /* Bewusst fest-dunkle Flaeche (z. B. Code/Hinweis-Baender): in Hell UND
     Dunkel derselbe, funktionierende Kontrast. */
  --color-band-bg: #131517;
  --color-band-fg: #f4f4f2;

  /* Systemschrift wie in der App -- keine Webfonts von Fremdservern
     (Datenschutz: kein IP-Transfer an Google Fonts ohne Einwilligung). */
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.85rem, 4vw, 2.75rem);
  --text-xl: clamp(2.5rem, 6.2vw, 4.4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 26px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-md:
    0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 12px -2px rgba(24, 24, 27, 0.08);
  --shadow-lg:
    0 2px 6px rgba(24, 24, 27, 0.05), 0 18px 40px -12px rgba(24, 24, 27, 0.22);
  --shadow: var(--shadow-md);

  --max: 72rem;
  --nav-h: 3.5rem;
}

/* Dunkel: automatisch nach Systemeinstellung (sofern nicht ausdruecklich
   "light" gewaehlt) und ausdruecklich per data-theme="dark" (Umschalter in
   App.vue). Nur Tokens neu belegen -- Komponenten nutzen ausschliesslich
   Tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg: #09090b;
    --color-card: #141416;
    --color-surface-2: #1c1c1f;
    --color-border: #26262b;
    --color-fg: #fafafa;
    --color-text: #e4e4e7;
    --color-muted: #a1a1aa;
    --color-accent-hover: #7d80f5;
    --color-accent-strong: color-mix(in srgb, var(--color-accent) 80%, #fff);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-accent-line: color-mix(in srgb, var(--color-accent) 45%, transparent);
    --color-error: #f87171;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:
      0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg:
      0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #09090b;
  --color-card: #141416;
  --color-surface-2: #1c1c1f;
  --color-border: #26262b;
  --color-fg: #fafafa;
  --color-text: #e4e4e7;
  --color-muted: #a1a1aa;
  --color-accent-hover: #7d80f5;
  --color-accent-strong: color-mix(in srgb, var(--color-accent) 80%, #fff);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 45%, transparent);
  --color-error: #f87171;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg:
    0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}