/**
 * 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%);
}