/**
 * CSS Custom Properties (Design Tokens)
 * markmann + müller datensysteme gmbh — Corporate Identity
 *
 * All variables extracted from the approved mockup.
 * These are the single source of truth for all styling.
 */

:root {
  /* =========================================================================
   * m+m Corporate Identity Colors
   * ========================================================================= */
  --mm-navy: #032e52;
  --mm-petrol: #00547d;
  --mm-topas: #008892;
  --mm-smaragd: #00b677;
  --mm-chartreuse: #9de818;

  /* =========================================================================
   * Neutral Grays
   * ========================================================================= */
  --mm-lichtgrau: #f3f3f3;
  --mm-hellgrau: #f0f0ef;
  --mm-grau: #cdcccc;
  --mm-dunkelgrau: #b0afb0;
  --mm-anthrazit: #474747;
  --mm-fossil: #6b6b78;

  /* =========================================================================
   * Semantic / Status Colors
   * ========================================================================= */
  --color-success: #00b677;
  --color-success-light: #e6f9f0;
  --color-warning: #f5a623;
  --color-warning-light: #fef6e6;
  --color-danger: #d13438;
  --color-danger-light: #fde7e9;
  --color-info: #008892;
  --color-info-light: #e6f5f6;

  /* =========================================================================
   * Surface & Background
   * ========================================================================= */
  --bg: #f5f6f8;
  --surface: #fff;
  --surface-hover: #fafbfc;

  /* =========================================================================
   * Text Colors
   * ========================================================================= */
  --text: #1a1a2e;
  --text-secondary: #6b6b78;
  --text-light: #b0afb0;

  /* =========================================================================
   * Borders
   * ========================================================================= */
  --border: #e8e8ec;
  --border-strong: #cdcccc;

  /* =========================================================================
   * Shadows
   * ========================================================================= */
  --shadow: 0 2px 8px rgba(3, 46, 82, .06);
  --shadow-lg: 0 8px 24px rgba(3, 46, 82, .10);
  --shadow-xl: 0 16px 48px rgba(3, 46, 82, .14);

  /* =========================================================================
   * Border Radius
   * ========================================================================= */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* =========================================================================
   * Layout
   * ========================================================================= */
  --header-height: 60px;
  --sidebar-width: 250px;

  /* =========================================================================
   * Transitions
   * ========================================================================= */
  --transition: .2s ease;

  /* =========================================================================
   * Gradients
   * ========================================================================= */
  --gradient-primary: linear-gradient(135deg, #032e52 0%, #00547d 40%, #008892 70%, #00b677 90%, #9de818 100%);
  --gradient-header: linear-gradient(135deg, #032e52 0%, #00547d 100%);

  /* =========================================================================
   * Alias-Variablen (für Codebase-Kompatibilität — werden an mehreren
   * Stellen via var(--xxx, fallback) referenziert, ohne dass sie zuvor
   * in :root definiert waren. Im Light Mode greift bisher nur der Fallback;
   * mit diesen Aliasen werden alle Stellen automatisch theme-aware.
   * Light-Werte hier explizit (keine var()-Indirektion), damit Browser-
   * Computed-Style-Auflösung deterministisch ist.)
   * ========================================================================= */
  --mm-border: #e8e8ec;          /* = --border light */
  --mm-card: #fff;               /* = --surface light */
  --mm-blue: #0d47a1;            /* Brand-Blue für Planning/KI-Eval */
  --mm-red: #d13438;             /* = --color-danger */
  --mm-text-light: #b0afb0;      /* = --text-light light */
  --mm-smaragd-light: #f0faf9;   /* helle Smaragd-Variante */
  --bg-light: #f5f6f8;           /* = --bg light */
  --text-primary: #1a1a2e;       /* = --text light */
  --danger: #d13438;             /* = --color-danger */
}

/* =========================================================================
 * Dark Theme Overrides
 *
 * Activated by <html data-theme="dark"> set by the SSR layout based on
 * users.theme / customer_users.theme. All design tokens are remapped here
 * — the rest of the codebase keeps using var(--…) and inherits dark mode
 * automatically. CI brand colors (mm-navy, mm-petrol, mm-topas, etc.) are
 * preserved as much as possible; only neutral surfaces/text/borders flip.
 * ========================================================================= */
html[data-theme="dark"] {
  /* Surface & Background */
  --bg: #0f1419;
  --surface: #1a2030;
  --surface-hover: #232a3d;

  /* Text */
  --text: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-light: #6b6b78;

  /* Borders */
  --border: #2a3142;
  --border-strong: #3a4256;

  /* Neutral grays — inverted so var(--mm-lichtgrau) reads as a subtle dark
     panel and var(--mm-anthrazit) reads as a light foreground tint. */
  --mm-lichtgrau: #232a3d;
  --mm-hellgrau: #2a3142;
  --mm-grau: #3a4256;
  --mm-dunkelgrau: #4a5266;
  --mm-anthrazit: #cdcccc;
  --mm-fossil: #9aa0a6;

  /* CI brand colors — slight lift for readability on dark surfaces. */
  --mm-navy: #1e4a7a;
  --mm-petrol: #00547d;
  --mm-topas: #00a8b5;
  --mm-smaragd: #00b677;
  --mm-chartreuse: #9de818;

  /* Status backgrounds — dark variants of the light tints. */
  --color-success-light: #0d3324;
  --color-warning-light: #3d2e0d;
  --color-danger-light: #3d1518;
  --color-info-light: #0d2e33;

  /* Shadows — opaque so they remain visible against dark backgrounds. */
  --shadow: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, .55);

  /* Header gradient — darker so it sits naturally on the dark canvas. */
  --gradient-header: linear-gradient(135deg, #061a2e 0%, #00385b 100%);

  /* Alias-Variablen — explizite Dark-Mode-Werte */
  --mm-border: #2a3142;          /* = --border dark */
  --mm-card: #1a2030;            /* = --surface dark */
  --mm-blue: #3b82f6;            /* lichter auf dunklem Background lesbar */
  --mm-red: #d13438;             /* Brand-Rot bleibt — kontrastiert auf dunklem BG */
  --mm-text-light: #6b6b78;      /* = --text-light dark */
  --mm-smaragd-light: #0d3324;   /* dunkles Smaragd-Tint */
  --bg-light: #0f1419;           /* = --bg dark */
  --text-primary: #e8eaed;       /* = --text dark */
  --danger: #d13438;
}

/* color-scheme native hint: tells the browser to use dark form widgets,
   scrollbars, etc. when the dark theme is active. */
html[data-theme="dark"] { color-scheme: dark; }
html:not([data-theme="dark"]) { color-scheme: light; }