/* =========================================================================
   HOSTL.eu – Design Tokens
   -------------------------------------------------------------------------
   Zentrale und einzige Designquelle des Dashboards.

   NUR DARK MODE. Es gibt bewusst keinen Light Mode, keinen Umschalter
   und keine prefers-color-scheme-Abfrage.

   Aufbau dieser Datei:
     1. --hostl-*  Farbrohwerte
     2. Maße und Typografie (Radien, Control-Höhen, Abstände, Schrift)
     3. Alias-Ebene: die historischen --nord-* / --adm-* Namen zeigen auf
        die --hostl-* Tokens. Dadurch laufen die bestehenden Stylesheets
        unverändert weiter.

   Zum Anpassen des Designs genügen die Blöcke 1–2. Block 3 bitte nur
   anfassen, wenn ein Alias tatsächlich neu zugeordnet werden soll.
   ========================================================================= */

/* =========================================================================
   1. Farben
   ========================================================================= */
:root {
  color-scheme: dark;

  /* --- Basis (Vorgabe aus der Markenrichtlinie) --------------------- */
  --hostl-bg: #0e1116;              /* Hintergrund   */
  --hostl-surface: #161a22;         /* Fläche        */
  --hostl-border: #262b36;          /* Rahmen        */
  --hostl-surface-hover: #1d222c;   /* Hover-Fläche  */
  --hostl-text: #edeff3;            /* Text          */
  --hostl-text-muted: #9aa3b2;      /* Text gedämpft */
  --hostl-primary: #3e63dd;         /* Primär        */

  /* --- Abgeleitete Flächen ------------------------------------------ */
  --hostl-bg-alt: #11151c;          /* Sidebar / Topbar            */
  --hostl-surface-2: #1d222c;       /* erhöhte Fläche / Hover      */
  --hostl-surface-3: #242a36;       /* stark erhöhte Fläche        */
  --hostl-surface-head: #1d222c;    /* Listen-/Tabellenkopf        */
  --hostl-surface-sunken: #0a0d12;  /* eingelassen (Code, Konsole) */
  --hostl-card-bg: var(--hostl-surface);
  --hostl-overlay: rgba(5, 7, 10, 0.72);

  /* --- Abgeleitete Rahmen ------------------------------------------- */
  --hostl-border-strong: #333945;
  --hostl-border-hover: #434a59;
  --hostl-border-subtle: rgba(237, 239, 243, 0.08);
  --hostl-divider: #262b36;

  /* --- Abgeleiteter Text -------------------------------------------- */
  --hostl-text-strong: #ffffff;     /* Überschriften          */
  --hostl-text-subtle: #8b94a3;     /* Labels, Meta           */
  --hostl-text-faint: #7b8495;      /* Platzhalter, Hinweise  */
  --hostl-text-disabled: #4a5261;

  /* --- Primär --------------------------------------------------------
     primary-text ist der Primärton für Text/Icons auf dem Hintergrund.
     #3E63DD erreicht auf #0E1116 nur 3.63:1 und ist als Fließtext nicht
     ausreichend – deshalb hier ein aufgehellter Ton. */
  --hostl-primary-hover: #5476e6;
  --hostl-primary-active: #3354cb;
  --hostl-primary-text: #8fa8f5;
  --hostl-on-primary: #ffffff;
  --hostl-primary-soft: rgba(62, 99, 221, 0.18);
  --hostl-primary-soft-strong: rgba(62, 99, 221, 0.28);
  --hostl-primary-ring: rgba(62, 99, 221, 0.34);

  --hostl-secondary: #7c8ba8;
  --hostl-secondary-hover: #8d9bb6;
  --hostl-secondary-soft: rgba(124, 139, 168, 0.16);

  --hostl-info: #8fa8f5;
  --hostl-info-soft: rgba(143, 168, 245, 0.14);

  /* --- Status --------------------------------------------------------
     *-text ist jeweils die auf dem Hintergrund lesbare Variante,
     der Basiston bleibt die Flächen-/Rahmenfarbe. */
  --hostl-success: #30a46c;
  --hostl-success-hover: #3cb97d;
  --hostl-success-text: #4cc38a;
  --hostl-success-soft: rgba(48, 164, 108, 0.16);
  --hostl-success-soft-strong: rgba(48, 164, 108, 0.26);
  --hostl-success-ring: rgba(48, 164, 108, 0.32);

  --hostl-warning: #e5a00d;
  --hostl-warning-hover: #f2b020;
  --hostl-warning-text: #f5c150;
  --hostl-warning-soft: rgba(229, 160, 13, 0.16);
  --hostl-warning-soft-strong: rgba(229, 160, 13, 0.26);
  --hostl-warning-ring: rgba(229, 160, 13, 0.32);

  --hostl-danger: #e5484d;
  --hostl-danger-hover: #ef5f63;
  --hostl-danger-text: #ff6369;
  --hostl-danger-soft: rgba(229, 72, 77, 0.16);
  --hostl-danger-soft-strong: rgba(229, 72, 77, 0.26);
  --hostl-danger-ring: rgba(229, 72, 77, 0.34);

  --hostl-purple: #8e4ec6;
  --hostl-purple-soft: rgba(142, 78, 198, 0.16);

  --hostl-teal: #12a594;
  --hostl-teal-soft: rgba(18, 165, 148, 0.16);

  /* Schrift auf gefüllten Statusflächen.
     Weiß erreicht auf Erfolg (3.16:1) und Warnung (2.24:1) kein AA,
     deshalb hier durchgehend der dunkle Ton. */
  --hostl-on-accent: #0e1116;

  /* --- Schatten ------------------------------------------------------ */
  --hostl-shadow-sm: 0 1px 2px rgba(5, 7, 10, 0.5);
  --hostl-shadow: 0 4px 6px -1px rgba(5, 7, 10, 0.55), 0 2px 4px -2px rgba(5, 7, 10, 0.55);
  --hostl-shadow-lg: 0 10px 15px -3px rgba(5, 7, 10, 0.6), 0 4px 6px -4px rgba(5, 7, 10, 0.55);
  --hostl-shadow-xl: 0 20px 40px -12px rgba(5, 7, 10, 0.75);
}

/* =========================================================================
   2. Maße & Typografie
   ========================================================================= */
:root {
  /* --- Radien – 8px Controls, 12px Karten --------------------------- */
  --hostl-radius-xs: 6px;
  --hostl-radius-sm: 8px;    /* Controls: Buttons, Inputs, Selects */
  --hostl-radius: 12px;      /* Karten, Panels, Modals             */
  --hostl-radius-lg: 16px;
  --hostl-radius-xl: 20px;
  --hostl-radius-pill: 9999px;

  /* --- Control-Höhen ------------------------------------------------- */
  --hostl-control-sm: 32px;
  --hostl-control-md: 40px;
  --hostl-control-lg: 48px;

  /* --- Fokus --------------------------------------------------------- */
  --hostl-focus-ring: 0 0 0 3px var(--hostl-primary-ring);
  --hostl-focus-ring-danger: 0 0 0 3px var(--hostl-danger-ring);

  /* --- Typografie ---------------------------------------------------- */
  --hostl-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hostl-font-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  /* --- Abstände ------------------------------------------------------ */
  --hostl-space-1: 4px;
  --hostl-space-2: 8px;
  --hostl-space-3: 12px;
  --hostl-space-4: 16px;
  --hostl-space-5: 20px;
  --hostl-space-6: 24px;
  --hostl-space-8: 32px;

  --hostl-transition: 0.2s ease;

  /* --- Scrim über Bildinhalten ---------------------------------------
     Liegt über Nutzerbildern (z. B. Avatar-Hover). Dunkler als die
     normalen Flächen, damit die Beschriftung auf jedem Bild trägt. */
  --hostl-scrim: rgba(5, 7, 10, 0.72);
  --hostl-on-scrim: #ffffff;

  /* Translucenter Ring auf gefüllten Primärflächen (Spinner). */
  --hostl-on-primary-soft: rgba(255, 255, 255, 0.35);

  /* Markenplatte hinter der Wortbildmarke. assets/logo.png ist eine
     reinweiße Glyphe; für helle Flächen (E-Mails) gibt es logo-dark.png. */
  --hostl-logo-plate: #0e1116;

  /* --- Fremdmarke ----------------------------------------------------
     Discord-Blurple, ausschließlich für den Discord-Call-to-Action.
     Bewusst außerhalb der Themepalette, da Markenvorgabe Dritter. */
  --brand-discord: #5865f2;
  --brand-discord-hover: #4752c4;
  --brand-discord-fg: #ffffff;
}

/* =========================================================================
   3. Alias-Ebene
   -------------------------------------------------------------------------
   Die bestehenden Stylesheets (base, layout, components, dashboard, admin,
   auth) referenzieren rund 1.040-mal --nord-* bzw. --adm-*. Diese Namen
   bleiben als Alias erhalten und zeigen auf die Tokens oben.

   Weil CSS-Variablen erst bei der Verwendung aufgelöst werden, genügt es,
   die Aliasse einmal hier zu deklarieren – der Theme-Wechsel in Block 2
   wirkt automatisch durch.
   ========================================================================= */
:root {
  /* --- Flächen ------------------------------------------------------- */
  --nord-bg: var(--hostl-bg);
  --nord-bg-alt: var(--hostl-bg-alt);
  --nord-surface: var(--hostl-surface);
  --nord-surface-2: var(--hostl-surface-2);
  --nord-surface-3: var(--hostl-surface-3);
  --nord-surface-head: var(--hostl-surface-head);
  --nord-surface-sunken: var(--hostl-surface-sunken);
  --nord-card-bg: var(--hostl-card-bg);
  --nord-overlay: var(--hostl-overlay);

  /* --- Rahmen / Ringe ------------------------------------------------ */
  --nord-ring: var(--hostl-border);
  --nord-ring-strong: var(--hostl-border-strong);
  --nord-ring-hover: var(--hostl-border-hover);
  --nord-ring-subtle: var(--hostl-border-subtle);
  --nord-divider: var(--hostl-divider);

  /* --- Text ----------------------------------------------------------- */
  --nord-text: var(--hostl-text);
  --nord-text-strong: var(--hostl-text-strong);
  --nord-text-muted: var(--hostl-text-muted);
  --nord-text-subtle: var(--hostl-text-subtle);
  --nord-text-faint: var(--hostl-text-faint);
  --nord-text-disabled: var(--hostl-text-disabled);

  /* --- Primär / Akzente ----------------------------------------------- */
  --nord-primary: var(--hostl-primary);
  --nord-primary-hover: var(--hostl-primary-hover);
  --nord-primary-active: var(--hostl-primary-active);
  --nord-primary-text: var(--hostl-primary-text);
  --nord-on-primary: var(--hostl-on-primary);
  --nord-primary-soft: var(--hostl-primary-soft);
  --nord-primary-soft-strong: var(--hostl-primary-soft-strong);

  --nord-secondary: var(--hostl-secondary);
  --nord-secondary-hover: var(--hostl-secondary-hover);
  --nord-secondary-soft: var(--hostl-secondary-soft);

  --nord-info: var(--hostl-info);
  --nord-info-soft: var(--hostl-info-soft);

  /* --- Status ---------------------------------------------------------- */
  --nord-success: var(--hostl-success);
  --nord-success-hover: var(--hostl-success-hover);
  --nord-success-text: var(--hostl-success-text);
  --nord-success-soft: var(--hostl-success-soft);
  --nord-success-soft-strong: var(--hostl-success-soft-strong);
  --nord-success-ring: var(--hostl-success-ring);

  --nord-warning: var(--hostl-warning);
  --nord-warning-hover: var(--hostl-warning-hover);
  --nord-warning-text: var(--hostl-warning-text);
  --nord-warning-soft: var(--hostl-warning-soft);
  --nord-warning-soft-strong: var(--hostl-warning-soft-strong);
  --nord-warning-ring: var(--hostl-warning-ring);

  --nord-danger: var(--hostl-danger);
  --nord-danger-hover: var(--hostl-danger-hover);
  --nord-danger-text: var(--hostl-danger-text);
  --nord-danger-soft: var(--hostl-danger-soft);
  --nord-danger-soft-strong: var(--hostl-danger-soft-strong);
  --nord-danger-ring: var(--hostl-danger-ring);

  --nord-purple: var(--hostl-purple);
  --nord-purple-soft: var(--hostl-purple-soft);

  --nord-teal: var(--hostl-teal);
  --nord-teal-soft: var(--hostl-teal-soft);

  --nord-on-accent: var(--hostl-on-accent);
  --nord-scrim: var(--hostl-scrim);
  --nord-on-scrim: var(--hostl-on-scrim);
  --nord-on-primary-soft: var(--hostl-on-primary-soft);

  /* --- Radien ----------------------------------------------------------- */
  --nord-radius-xs: var(--hostl-radius-xs);
  --nord-radius-sm: var(--hostl-radius-sm);
  --nord-radius: var(--hostl-radius);
  --nord-radius-lg: var(--hostl-radius-lg);
  --nord-radius-xl: var(--hostl-radius-xl);
  --nord-radius-pill: var(--hostl-radius-pill);

  /* --- Schatten & Fokus -------------------------------------------------- */
  --nord-shadow-sm: var(--hostl-shadow-sm);
  --nord-shadow: var(--hostl-shadow);
  --nord-shadow-lg: var(--hostl-shadow-lg);
  --nord-shadow-xl: var(--hostl-shadow-xl);
  --nord-focus-ring: var(--hostl-focus-ring);
  --nord-focus-ring-danger: var(--hostl-focus-ring-danger);

  /* --- Typografie & Abstände --------------------------------------------- */
  --nord-font: var(--hostl-font);
  --nord-font-mono: var(--hostl-font-mono);
  --nord-space-1: var(--hostl-space-1);
  --nord-space-2: var(--hostl-space-2);
  --nord-space-3: var(--hostl-space-3);
  --nord-space-4: var(--hostl-space-4);
  --nord-space-5: var(--hostl-space-5);
  --nord-space-6: var(--hostl-space-6);
  --nord-space-8: var(--hostl-space-8);
  --nord-transition: var(--hostl-transition);

  /* --- Altes Admin-Designsystem ------------------------------------------ */
  --adm-bg: var(--hostl-bg);
  --adm-surface: var(--hostl-surface);
  --adm-surface-hover: var(--hostl-surface-hover);
  --adm-border: var(--hostl-border);
  --adm-border-hover: var(--hostl-border-hover);
  --adm-primary: var(--hostl-primary);
  --adm-primary-light: var(--hostl-primary-text);
  --adm-primary-gradient: var(--hostl-primary);
  --adm-success: var(--hostl-success);
  --adm-danger: var(--hostl-danger);
  --adm-warning: var(--hostl-warning);
  --adm-text: var(--hostl-text);
  --adm-text-secondary: var(--hostl-text-subtle);
  --adm-text-muted: var(--hostl-text-faint);
  --adm-radius: var(--hostl-radius);
  --adm-radius-sm: var(--hostl-radius-sm);
  --adm-radius-lg: var(--hostl-radius-lg);
  --adm-font: var(--hostl-font);
  --adm-shadow: var(--hostl-shadow);
}