/* ==========================================================================
   VARIABLES.CSS — Design Tokens
   Dark/Light Theme mit klarer Hierarchie — zum Arbeiten gemacht
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Hintergrund-Ebenen — Dark Mode (Default)
     Warm-grau statt kalt-blau. Genug Kontrast zum Unterscheiden.
     -------------------------------------------------------------------------- */
  --bg-base:     #161719;
  --bg-surface:  #1E1F24;
  --bg-elevated: #262830;
  --bg-hover:    #2F3139;
  --bg-active:   #3A3D47;

  /* --------------------------------------------------------------------------
     Rahmenfarben
     -------------------------------------------------------------------------- */
  --border-subtle:  #2A2C34;
  --border-default: #3A3D47;
  --border-strong:  #4D5060;

  /* --------------------------------------------------------------------------
     Textfarben — Warm, nicht grell-weiss
     -------------------------------------------------------------------------- */
  --text-primary:   #F0EEEA;
  --text-secondary: #C4C3BD;
  --text-tertiary:  #9D9C97;
  --text-muted:     #7A7975;

  /* --------------------------------------------------------------------------
     Akzentfarbe — Pfeiffer Digital Blau
     -------------------------------------------------------------------------- */
  --accent:        #0EA5E9;
  --accent-hover:  #38BDF8;
  --accent-subtle: #0EA5E91A;
  --accent-muted:  #0EA5E90A;

  /* --------------------------------------------------------------------------
     Status-Farben
     -------------------------------------------------------------------------- */
  --color-danger:  #E5534B;
  --color-warning: #DAAA3F;
  --color-success: #22C55E;
  --color-info:    #539BF5;

  /* --------------------------------------------------------------------------
     Prioritaets-Farben (P1-P4)
     -------------------------------------------------------------------------- */
  --prio-p1: #EF4444;   /* Dringend — Rot */
  --prio-p2: #F97316;   /* Hoch — Orange */
  --prio-p3: #DAAA3F;   /* Mittel — Gelb */
  --prio-p4: #6B7280;   /* Normal — Grau */

  /* Backwards-compatible Alias fuer alte CSS-Klassen */
  --prio-hoch:    var(--prio-p1);
  --prio-mittel:  var(--prio-p3);
  --prio-niedrig: var(--prio-p4);

  /* --------------------------------------------------------------------------
     Wartend-Status Farbe
     -------------------------------------------------------------------------- */
  --color-wartend: #F59E0B;

  /* --------------------------------------------------------------------------
     Typografie
     -------------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
               "Courier New", monospace;

  /* Schriftgroessen — gross genug fuer Mobile-Lesbarkeit (min 16px body) */
  --text-xs:  0.78rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.3rem;
  --text-xl:  1.5rem;

  /* --------------------------------------------------------------------------
     Abstands-Skala
     -------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;

  /* --------------------------------------------------------------------------
     Eckenradien — Einheitlich und zurueckhaltend
     -------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* --------------------------------------------------------------------------
     Schatten (Dark Mode — staerker weil dunkler Hintergrund)
     -------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.35);

  /* --------------------------------------------------------------------------
     Uebergaenge
     -------------------------------------------------------------------------- */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.2s ease;

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --sidebar-width: 240px;

  /* Task-Card */
  --card-bg:       #1E1F24;
  --card-border:   #2A2C34;
  --card-hover:    #3A3D47;
  --btn-bg:        #262830;
  --btn-border:    #333;
  --btn-hover-bg:  #3A3D47;
}

/* ==========================================================================
   LIGHT MODE
   Aktiviert durch .light Klasse auf <html> oder System-Preference
   ========================================================================== */

:root.light {
  --bg-base:     #F5F5F7;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover:    #F0F0F2;
  --bg-active:   #E8E8EC;

  --border-subtle:  #E5E7EB;
  --border-default: #D1D5DB;
  --border-strong:  #9CA3AF;

  --text-primary:   #1A1A2E;
  --text-secondary: #4B5563;
  --text-tertiary:  #6B7280;
  --text-muted:     #9CA3AF;

  --accent:        #0284C7;
  --accent-hover:  #0369A1;
  --accent-subtle: #0284C71A;
  --accent-muted:  #0284C70A;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.12);

  --card-bg:       #FFFFFF;
  --card-border:   #E5E7EB;
  --card-hover:    #F0F0F2;
  --btn-bg:        #F5F5F7;
  --btn-border:    #D1D5DB;
  --btn-hover-bg:  #E8E8EC;
}