/* DosenHub Designsystem – Design-Tokens (Phase 1)
 *
 * EINZIGE Quelle für Farben, Schrift, Abstände, Rundungen, Schatten, Bewegung und Hintergründe der allgemeinen Hub-Oberfläche.
 * Dieses Blatt definiert das Theme "DosenHub Classic" (Standard). Weitere Themes überschreiben NUR Tokens (siehe theme.js und
 * docs/DESIGN_SYSTEM.md) – Komponenten (components.css) und Seiten-CSS lesen ausschließlich diese Tokens.
 *
 * Konventionen
 *  - Präfix --ds-  = Designsystem. Spiele behalten ihre eigene visuelle Identität und eigene Präfixe (--dm- Mining, Pet-V2, --dg-, --sg- …).
 *  - Semantische Namen (primary, surface, text-muted), keine Farbnamen (purple-2). Rohfarben stehen nur hier.
 *  - "-rgb"-Tokens enthalten nur die Kanäle ("155 107 242"), damit Transparenzen mit Themewechsel mitlaufen:
 *        background: rgb(var(--ds-primary-rgb) / .18);
 *  - Neue Tokens zuerst hier ergänzen, dann in docs/DESIGN_SYSTEM.md dokumentieren.
 */
:root,
:root[data-theme="classic"] {
  color-scheme: dark;

  /* ---- Farben: Grundflächen ---- */
  --ds-bg: #0e0c17;                    /* Seitenhintergrund */
  --ds-bg-rgb: 14 12 23;
  --ds-surface-1: #16131f;             /* Karten, Panels */
  --ds-surface-2: #1c1829;             /* Erhöhte Flächen, Eingabefelder */
  --ds-surface-3: #21192f;             /* Hover/Auswahl auf Flächen, Kacheln */
  --ds-surface-overlay: #171126;       /* Dialoge, Sheets */
  --ds-surface-inset: #0f0a1a;         /* Vertiefte Flächen (Textfelder) */
  --ds-surface-1-rgb: 22 19 31;
  --ds-surface-2-rgb: 28 24 41;
  --ds-surface-3-rgb: 33 25 47;

  /* ---- Farben: Marke ---- */
  --ds-primary: #9b6bf2;               /* Hauptakzent (Violett) */
  --ds-primary-rgb: 155 107 242;
  --ds-primary-strong: #6d5eea;        /* Kräftigere Variante (Verläufe, aktive Flächen) */
  --ds-primary-strong-rgb: 109 94 234;
  --ds-primary-soft: #d6bcff;          /* Heller Akzent für Text/Icons auf dunklem Grund */
  --ds-primary-soft-rgb: 214 188 255;
  --ds-primary-gradient: linear-gradient(180deg, #a766f0, #8c49d8);
  --ds-on-primary: #ffffff;            /* Text auf Primärflächen */
  --ds-accent: #7ee8c4;                /* Zweitakzent (Mint) */
  --ds-accent-rgb: 126 232 196;

  /* ---- Farben: Rückmeldung ---- */
  --ds-success: #86efac;
  --ds-success-rgb: 134 239 172;
  --ds-warning: #fbbf24;
  --ds-warning-rgb: 251 191 36;
  --ds-danger: #f2685c;
  --ds-danger-rgb: 242 104 92;
  --ds-info: #c4b5fd;
  --ds-info-rgb: 196 181 253;

  /* ---- Farben: Text ---- */
  --ds-text: #f5f3ff;
  --ds-text-rgb: 245 243 255;          /* für Transparenzen (Linien, Füllungen auf dunklem Grund) */
  --ds-text-secondary: rgba(229, 224, 250, .7);
  --ds-text-muted: rgba(200, 194, 224, .48);
  --ds-text-link: #cfa9ff;

  /* ---- Farben: Linien und Fokus ---- */
  --ds-border: rgba(255, 255, 255, .08);
  --ds-border-strong: rgba(255, 255, 255, .18);
  --ds-border-primary: rgb(var(--ds-primary-rgb) / .4);
  --ds-focus: #d9bbff;                 /* Fokusring (Tastatur) */
  --ds-overlay-scrim: rgba(3, 2, 10, .72);

  /* ---- Typografie ---- */
  --ds-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: var(--ds-font-body);   /* Überschriften; eigene Schrift später hier setzen */
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-text-2xs: 10px;
  --ds-text-xs: 11px;
  --ds-text-sm: 12px;
  --ds-text-base: 13px;
  --ds-text-md: 14px;                  /* Fließtext / Standard */
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 25px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 600;
  --ds-weight-bold: 800;
  --ds-leading-tight: 1.15;
  --ds-leading-normal: 1.45;
  --ds-tracking-label: .09em;          /* Großbuchstaben-Labels */

  /* ---- Abstände (4-px-Raster) ---- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-gutter: 16px;                   /* Seitenrand auf Smartphones */

  /* ---- Rundungen ---- */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;                /* Buttons, Felder */
  --ds-radius-lg: 16px;                /* Karten */
  --ds-radius-xl: 22px;                /* Dialoge, Sheets */
  --ds-radius-pill: 999px;

  /* ---- Linien ---- */
  --ds-border-width: 1px;

  /* ---- Schatten ---- */
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --ds-shadow-lg: 0 28px 70px rgba(0, 0, 0, .55);
  --ds-shadow-glow: 0 6px 18px rgb(var(--ds-primary-strong-rgb) / .35);

  /* ---- Bewegung ---- */
  --ds-duration-fast: .12s;
  --ds-duration: .18s;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Bedienbarkeit ---- */
  --ds-tap-min: 44px;                  /* Mindest-Tippfläche */

  /* ---- Ebenen ---- */
  --ds-z-nav: 40;
  --ds-z-overlay: 80;
  --ds-z-dialog: 90;
  --ds-z-toast: 100;

  /* ---- Hintergrund (Seite) ---- */
  --ds-page-bg-color: var(--ds-bg);
  --ds-page-bg-image: image-set(url('/community-assets/login-background-v4.webp') type('image/webp'));
  --ds-page-bg-image-mobile: image-set(url('/community-assets/login-background-v4-mobile.webp') type('image/webp'));
  --ds-page-bg-overlay: linear-gradient(transparent, transparent);          /* Schleier ueber dem Hintergrundbild (Lesbarkeit) */
  --ds-page-bg-overlay-mobile: linear-gradient(transparent, transparent);   /* staerker auf Smartphones, wo Inhalte das Bild verdecken */
  --ds-meta-theme-color: #17122b;      /* Statusleiste mobiler Browser */
  --ds-icon-filter: none;              /* Farbdrehung der Bild-Icons (PNG in Classic-Violett) */
}

/* ---- Rückwärtskompatibilität: bisherige --dh-*-Variablen der Hub-Oberfläche zeigen auf die neuen Tokens ----
 * So passt sich bestehendes CSS (hub.css, help-center.css, mining-v2-admin.css) bei Themewechseln bereits an.
 * Neuer Code verwendet direkt --ds-*; diese Aliase entfallen, sobald Phase 2 abgeschlossen ist. */
:root {
  --dh-bg: var(--ds-bg);
  --dh-surface-1: var(--ds-surface-1);
  --dh-surface-2: var(--ds-surface-2);
  --dh-purple-1: var(--ds-primary-strong);
  --dh-purple-2: var(--ds-primary);
  --dh-border: var(--ds-border);
  --dh-text-primary: var(--ds-text);
  --dh-text-secondary: var(--ds-text-secondary);
  --dh-text-muted: var(--ds-text-muted);
  --dh-danger: var(--ds-danger);
  --dh-shadow: var(--ds-shadow-lg);
}