/* ============================================================
   corporate-identity.css – Zentrale Corporate-Identity-Steuerung
   Hier bündelst du Farben, Verläufe und visuelle Marken-Tokens
   für Nutzer-App UND Admin-Dashboard an einer Stelle.
   ============================================================ */

:root {
  /* ==========================================================
     1) Reine Markenfarben – nur hier als feste Basis definieren
     ========================================================== */
  --ci-brand-yellow: #e8f04a;
  --ci-brand-yellow-rgb: 232, 240, 74;
  --ci-brand-olive: #6b7700;
  --ci-brand-olive-rgb: 107, 119, 0;
  --ci-brand-blue: #4ab4f0;
  --ci-brand-blue-rgb: 74, 180, 240;
  --ci-brand-blue-dark: #1a6fa8;
  --ci-brand-turquoise: #4af0d8;
  --ci-brand-turquoise-rgb: 74, 240, 216;
  --ci-brand-green: #4af097;
  --ci-brand-green-rgb: 74, 240, 151;
  --ci-brand-red: #f04a4a;
  --ci-brand-red-rgb: 240, 74, 74;
  --ci-brand-orange: #f0a44a;
  --ci-brand-orange-rgb: 240, 164, 74;

  /* ==========================================================
     2) Dark-Theme Oberflächen – Hauptproduktdarstellung
     ========================================================== */
  --ci-dark-bg-base: #0d0f12;
  --ci-dark-bg-surface: #13161b;
  --ci-dark-bg-elevated: #1a1e26;
  --ci-dark-bg-sidebar: #0a0c0f;
  --ci-dark-border: #252a33;
  --ci-dark-border-bright: #303847;
  --ci-dark-text-primary: #eef0f5;
  --ci-dark-text-secondary: #7a8499;
  --ci-dark-text-muted: #6b7b8e;

  /* ==========================================================
     3) Light-Theme Oberflächen – helle Produktdarstellung
     ========================================================== */
  --ci-light-bg-base: #f0f2f5;
  --ci-light-bg-surface: #ffffff;
  --ci-light-bg-elevated: #e8eaee;
  --ci-light-bg-sidebar: #e2e5eb;
  --ci-light-border: #d0d4dc;
  --ci-light-border-bright: #b8bfcc;
  --ci-light-text-primary: #111318;
  --ci-light-text-secondary: #4a5568;
  --ci-light-text-muted: #8a95a8;

  /* ==========================================================
     4) Statusfarben – systemweit einheitlich
     ========================================================== */
  --ci-success-dark: #4af097;
  --ci-success-light: #1a7a4a;
  --ci-error-dark: #f04a4a;
  --ci-error-light: #c0392b;
  --ci-warning-dark: #f0a44a;
  --ci-warning-light: #b7720a;
  --ci-info-dark: #4ab4f0;
  --ci-info-light: #1a6fa8;

  /* ==========================================================
     5) Marken-Verläufe und Glows – hier später zentral anpassen
     ========================================================== */
  --ci-gradient-progress: linear-gradient(
    90deg,
    var(--accent),
    rgba(var(--accent-rgb), 0.55)
  );
  --ci-gradient-dark-page-glow-a: radial-gradient(
    ellipse at 20% 20%,
    rgba(var(--ci-brand-yellow-rgb), 0.03) 0%,
    transparent 50%
  );
  --ci-gradient-dark-page-glow-b: radial-gradient(
    ellipse at 80% 80%,
    rgba(var(--ci-brand-blue-rgb), 0.03) 0%,
    transparent 50%
  );
  --ci-gradient-public-home-a: radial-gradient(
    circle at top right,
    rgba(var(--ci-brand-yellow-rgb), 0.16),
    transparent 28%
  );
  --ci-gradient-public-home-b: radial-gradient(
    circle at bottom left,
    rgba(var(--ci-brand-blue-rgb), 0.06),
    transparent 35%
  );
  --ci-gradient-login-shell: radial-gradient(
    ellipse at 30% 40%,
    rgba(var(--ci-brand-yellow-rgb), 0.06) 0%,
    transparent 60%
  );
  --ci-gradient-account-setup-brand: radial-gradient(
    circle at 20% 20%,
    rgba(var(--ci-brand-yellow-rgb), 0.16),
    transparent 36%
  );
  --ci-gradient-order-3d: linear-gradient(
    90deg,
    var(--accent),
    rgba(var(--ci-brand-blue-rgb), 0.45),
    transparent
  );
  --ci-gradient-order-laser: linear-gradient(
    90deg,
    var(--ci-brand-blue),
    rgba(var(--ci-brand-turquoise-rgb), 0.55),
    transparent
  );
  --ci-gradient-order-multi: linear-gradient(
    90deg,
    var(--ci-brand-yellow),
    var(--ci-brand-blue),
    rgba(var(--ci-brand-green-rgb), 0.55)
  );
  --ci-gradient-order-service: linear-gradient(
    90deg,
    var(--ci-brand-orange),
    rgba(var(--ci-brand-orange-rgb), 0.35),
    transparent
  );
  --ci-gradient-light-page-glow-a: radial-gradient(
    ellipse at 20% 20%,
    rgba(var(--ci-brand-olive-rgb), 0.04) 0%,
    transparent 50%
  );
  --ci-gradient-light-page-glow-b: radial-gradient(
    ellipse at 80% 80%,
    rgba(26, 111, 168, 0.04) 0%,
    transparent 50%
  );
  --ci-surface-order-card: radial-gradient(
      circle at 12% 0%,
      rgba(var(--ci-brand-blue-rgb), 0.11),
      transparent 34%
    ),
    linear-gradient(180deg, rgba(21, 25, 34, 0.92), rgba(12, 15, 20, 0.82));
  --ci-surface-order-card-hover: radial-gradient(
      circle at 12% 0%,
      rgba(var(--ci-brand-blue-rgb), 0.16),
      transparent 36%
    ),
    linear-gradient(180deg, rgba(24, 29, 39, 0.96), rgba(14, 17, 24, 0.9));
  --ci-badge-warning-bg: rgba(var(--ci-brand-orange-rgb), 0.12);
  --ci-badge-warning-border: rgba(var(--ci-brand-orange-rgb), 0.2);
  --ci-badge-warning-text: var(--ci-brand-orange);

  /* ==========================================================
     6) Mapping auf die bestehenden Projekt-Variablen
     So bleibt der aktuelle Code kompatibel.
     ========================================================== */
  --bg-base: var(--ci-dark-bg-base);
  --bg-surface: var(--ci-dark-bg-surface);
  --bg-elevated: var(--ci-dark-bg-elevated);
  --bg-sidebar: var(--ci-dark-bg-sidebar);
  --border: var(--ci-dark-border);
  --border-bright: var(--ci-dark-border-bright);

  --accent: var(--ci-brand-yellow);
  --accent-rgb: var(--ci-brand-yellow-rgb);
  --accent-dim: rgba(var(--accent-rgb), 0.12);
  --accent-glow: rgba(var(--accent-rgb), 0.3);

  --text-primary: var(--ci-dark-text-primary);
  --text-secondary: var(--ci-dark-text-secondary);
  --text-muted: var(--ci-dark-text-muted);

  --success: var(--ci-success-dark);
  --error: var(--ci-error-dark);
  --warning: var(--ci-warning-dark);
  --info: var(--ci-info-dark);

  --scrollbar-thumb: rgba(var(--ci-brand-yellow-rgb), 0.42);
  --scrollbar-thumb-start: rgba(var(--ci-brand-yellow-rgb), 0.58);
  --scrollbar-thumb-end: rgba(var(--ci-brand-yellow-rgb), 0.3);
  --scrollbar-thumb-start-hover: rgba(var(--ci-brand-yellow-rgb), 0.82);
  --scrollbar-thumb-end-hover: rgba(var(--ci-brand-yellow-rgb), 0.5);
}

/* Gemeinsames Light-Theme für Nutzer-App und Admin-Dashboard. */
body.light-theme,
:root[data-theme="light"] {
  --bg-base: var(--ci-light-bg-base);
  --bg-surface: var(--ci-light-bg-surface);
  --bg-elevated: var(--ci-light-bg-elevated);
  --bg-sidebar: var(--ci-light-bg-sidebar);
  --border: var(--ci-light-border);
  --border-bright: var(--ci-light-border-bright);

  --accent: var(--ci-brand-olive);
  --accent-rgb: var(--ci-brand-olive-rgb);
  --accent-dim: rgba(var(--accent-rgb), 0.12);
  --accent-glow: rgba(var(--accent-rgb), 0.3);

  --text-primary: var(--ci-light-text-primary);
  --text-secondary: var(--ci-light-text-secondary);
  --text-muted: var(--ci-light-text-muted);

  --success: var(--ci-success-light);
  --error: var(--ci-error-light);
  --warning: var(--ci-warning-light);
  --info: var(--ci-info-light);

  --scrollbar-thumb: rgba(104, 116, 141, 0.55);
  --scrollbar-thumb-start: rgba(104, 116, 141, 0.68);
  --scrollbar-thumb-end: rgba(104, 116, 141, 0.36);
  --scrollbar-thumb-start-hover: rgba(84, 94, 116, 0.88);
  --scrollbar-thumb-end-hover: rgba(84, 94, 116, 0.48);
}