/* variables.css - CSS-Variablen für Light und Dark Mode */

:root {
  /* Light Mode (Standard) */
  --bg-primary: #FAF9F6;          /* Elfenbeinweiß - Hintergrund */
  --bg-secondary: #F5F3F0;        /* Leicht abgedunkeltes Elfenbein - für Karten/Panels */
  --text-primary: #222222;        /* Dunkelgraphit - Haupttext */
  --text-secondary: #444444;      /* Mittleres Graphit - Sekundärtext */
  --accent-primary: #002B7F;      /* Königsblau - Akzente & Überschriften */
  --highlight: #CBA135;           /* Goldmetallic - Hervorhebungen */
  --card-bg: rgba(255, 255, 255, 0.95); /* Fast-Reinweiß - Kartenhintergrund mit hoher Deckung */
  --shadow: rgba(0, 0, 0, 0.08);  /* Schatten für Karten */
  
  /* Art Déco Elemente */
  --deco-primary: #CBA135;        /* Goldmetallic für Deko-Elemente */
  --deco-secondary: #002B7F;      /* Königsblau für Deko-Akzente */
  --deco-pattern: linear-gradient(135deg, var(--deco-primary), transparent 75%);
  
  /* Interaktive Elemente */
  --btn-primary-bg: #002B7F;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #001E5C;
  --btn-highlight-bg: #CBA135;
  --btn-highlight-text: #FFFFFF;
  --btn-highlight-hover: #B38E2C;
  
  /* Typografie */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  
  /* Schriftgrößen */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.75rem;   /* 44px - erhöht für bessere Hierarchie */
  --text-5xl: 3.5rem;    /* 56px - erhöht für dramatischere Hauptüberschriften */
  
  /* Schrift-Eigenschaften */
  --letter-spacing-normal: normal;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  
  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

[data-theme="dark"] {
  /* Dark Mode */
  --bg-primary: #0D1117;          /* Tiefmarine - Hintergrund */
  --bg-secondary: #161B22;        /* Dunkelmarine - für Karten/Panels */
  --text-primary: #CCCCCC;        /* Hellgrau - Haupttext */
  --text-secondary: #8B949E;      /* Mittelgrau - Sekundärtext */
  --accent-primary: #D0D0D0;      /* Nebelgrau - Akzente & Überschriften */
  --highlight: #E8C77B;           /* Weißgold - Hervorhebungen */
  --card-bg: rgba(29, 35, 46, 0.95); /* Dunkelmarine intensiv - Kartenhintergrund mit hoher Deckung */
  --shadow: rgba(0, 0, 0, 0.25);  /* Schatten für Karten */
  
  /* Art Déco Elemente */
  --deco-primary: #E8C77B;        /* Weißgold für Deko-Elemente */
  --deco-secondary: #D0D0D0;      /* Nebelgrau für Deko-Akzente */
  --deco-pattern: linear-gradient(135deg, var(--deco-primary), #161B22 75%);
  
  /* Interaktive Elemente */
  --btn-primary-bg: #30363D;
  --btn-primary-text: #D0D0D0;
  --btn-primary-hover: #3F444C;
  --btn-highlight-bg: #B38E2C;
  --btn-highlight-text: #FFFFFF;
  --btn-highlight-hover: #CBA135;
}