/* ============================================================
   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.
   ============================================================ */

/* ============================================================
   CI-Schnellstart – welche Tokens du zuerst anfasst

   1) Brand / Grundmarke
      Wenn sich eure Kernfarben ändern, starte immer hier:
      --ci-brand-yellow
      --ci-brand-olive
      --ci-brand-blue
      --ci-brand-turquoise
      --ci-brand-green
      --ci-brand-red
      --ci-brand-orange

   2) Statusfarben
      Für Erfolg, Fehler, Warnung und Info zuerst diese Tokens ändern:
      --ci-success-dark / --ci-success-light
      --ci-error-dark   / --ci-error-light
      --ci-warning-dark / --ci-warning-light
      --ci-info-dark    / --ci-info-light

   3) Glows und Marken-Verläufe
      Für Hintergrundstimmung, weiche Lichtflächen und Markenverläufe:
      --ci-gradient-dark-page-glow-a
      --ci-gradient-dark-page-glow-b
      --ci-gradient-light-page-glow-a
      --ci-gradient-light-page-glow-b
      --ci-gradient-public-home-a
      --ci-gradient-public-home-b
      --ci-gradient-login-shell
      --ci-gradient-account-setup-brand
      --ci-gradient-progress

   4) Karten und Oberflächen
      Für markante Flächen wie Auftragskarten oder Badge-Hintergründe:
      --ci-surface-order-card
      --ci-surface-order-card-hover
      --ci-badge-warning-bg
      --ci-badge-warning-border
      --ci-badge-warning-text

   5) Highlights im laufenden Produkt
      Viele bestehende Styles greifen nicht direkt auf die reinen
      Markenfarben zu, sondern auf die Projekt-Mapping-Tokens weiter unten:
      --accent
      --accent-rgb
      --accent-dim
      --accent-glow
      --text-primary
      --text-secondary
      --text-muted

   Empfehlung:
   - Zuerst immer die CI-Brand-Tokens oben anpassen.
   - Danach nur bei Bedarf einzelne Glows, Karten oder Statusflächen feinjustieren.
   - Die Mapping-Tokens unten nur ändern, wenn die gesamte App bewusst anders
     reagieren soll als das reine Markenfarbsystem.
   ============================================================ */

: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);
}