/* themes/digitalindependent/static/css/variables.css */
:root {
  /* Color Palette - Dark Mode (Default) */
  --color-accent-primary: #F78C21; /* Orange aus Logo */
  --color-accent-primary-hover: #FF9F45;
  --color-accent-primary-active: #E07A15;
  --color-accent-primary-transparent: rgba(247, 140, 33, 0.1);

  /* Für die Kompatibilität mit bestehenden Templates */
  --color-primary: #F78C21;
  --color-primary-light: #FF9F45;
  --color-primary-dark: #E07A15;

  --color-accent-secondary: #2D7FF9; /* Blau, komplementär zu Orange */
  --color-accent-tertiary: #8B3DFF; /* Lila für Hervorhebungen */

  /* Hintergrundfarben */
  --color-bg-primary: #121212; /* sehr dunkel für Dark Mode */
  --color-bg-secondary: #1E1E1E; /* etwas heller als Haupthintergrund */
  --color-bg-tertiary: #2A2A2A; /* für Interaktionselemente */
  --color-bg-quaternary: #3A3A3A; /* für zusätzliche Abstufung */

  /* Textfarben */
  --color-text-primary: #F2F2F2; /* helles Grau/fast Weiß */
  --color-text-secondary: #AAAAAA; /* mittelgrau */
  --color-text-tertiary: #888888; /* dunkelgrau */

  /* Status-Farben */
  --color-success: #4CAF50; /* Grün */
  --color-warning: #FFC107; /* Gelb */
  --color-error: #F44336; /* Rot */
  --color-info: #2196F3; /* Blau */

  /* Layout-Werte */
  --sidebar-width: 250px;
  --container-max-width: 1200px;
  --content-max-width: 800px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Spacing System */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Typography */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  /* Schatten */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Breakpoints (für Referenz im CSS, nicht direkt als Variablen nutzbar) */
  /* --breakpoint-sm: 576px; */
  /* --breakpoint-md: 768px; */
  /* --breakpoint-lg: 992px; */
  /* --breakpoint-xl: 1200px; */

    /* Evolution-spezifische Farben */
  --color-evolution-active: #00FF88;      /* Subtiles Grün für "aktive" Evolution */
  --color-evolution-building: #FFA500;    /* Orange für "in Entwicklung" */
  --color-evolution-progress: var(--color-accent-primary); /* Unser Orange für Fortschritt */

  /* System-Status Farben */
  --color-system-indicator: var(--color-evolution-active);
  --color-system-text: var(--color-text-tertiary);
  --color-system-accent: rgba(247, 140, 33, 0.2);

  /* Evolution-UI Elemente */
  --evolution-border: 2px solid rgba(247, 140, 33, 0.3);
  --evolution-background: rgba(247, 140, 33, 0.05);
  --evolution-progress-height: 2px;

  /* Subtile Animationen für Evolution */
  --evolution-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --evolution-pulse: evolution-pulse 3s ease-in-out infinite;

  /* Typography für System-Status */
  --font-system-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-size-system: 10px;

  /* Terminal-spezifische Variablen (ERGÄNZUNG) */
  --terminal-bg: #0D0D0D;
  --terminal-border: var(--color-bg-tertiary);
  --terminal-prompt: var(--color-evolution-active);
}

/* Prefers-reduced-motion: This is for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Light Mode Variablen werden in einer separaten CSS-Datei definiert */