/**
 * ============================================
 * Traumli Design System
 * Phase 1 - Farben, Typografie, Tag-/Nachtmodus
 * ============================================
 */

/* ============================================
   CSS Custom Properties (Variablen)
   ============================================ */

:root {
  /* ====== TAG-MODUS (Standard) ====== */
  
  /* Primäre Farben - Verbesserte Accessibility */
  --color-primary: #D81B60;        /* Kräftiges Pink - Hauptfarbe (besserer Kontrast) */
  --color-secondary: #4A90E2;      /* Kräftiges Blau (statt hellblau) */
  --color-accent: #FFE4B5;         /* Pfirsich */
  
  /* Kategorie-Farben (hell & freundlich) */
  --color-animals: #FFE4B5;        /* Pfirsich - Tiere */
  --color-space: #D4C5F9;          /* Lavendel - Weltraum */
  --color-pirates: #B4D7FF;        /* Himmelblau - Piraten */
  --color-horses: #FFB6D9;         /* Rosa - Pferde */
  --color-adventure: #B8E6B8;      /* Mintgrün - Abenteuer */
  --color-magic: #F4C2F1;          /* Flieder - Magie */
  
  /* Neutrale Farben */
  --color-bg-primary: #FFFBF5;     /* Cremeweiß - Haupthintergrund */
  --color-bg-secondary: #FFF5F5;   /* Hellrosa-Weiß - Karten */
  --color-bg-tertiary: #F0F8FF;    /* Eisblau - Akzente */
  
  --color-text-primary: #2C2C2C;   /* Dunkleres Grau - Haupttext (besserer Kontrast) */
  --color-text-secondary: #5A5A5A; /* Dunkleres Mittelgrau - Sekundärtext */
  --color-text-muted: #8A8A8A;     /* Dunkleres Hellgrau - weniger wichtig */
  
  --color-border: #E8E8E8;         /* Helle Rahmen */
  --color-shadow: rgba(0, 0, 0, 0.08); /* Sanfte Schatten */
  
  /* UI-Farben */
  --color-success: #B8E6B8;        /* Grün - Erfolg */
  --color-warning: #FFE4B5;        /* Orange - Warnung */
  --color-error: #FFB8B8;          /* Rot - Fehler */
  --color-info: #B4D7FF;           /* Blau - Info */
  
  /* Sternenhimmel (für Nachtmodus) */
  --star-opacity: 0;               /* Tagsüber unsichtbar */
  --star-color: #FFD700;           /* Gold */
  
  /* Spacing System (8px Basis) */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px */
  --radius-full: 9999px; /* Rund */
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Typography */
  --font-primary: 'Nunito', 'Comic Sans MS', cursive, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Sizes - Mobile First */
  --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.25rem;   /* 36px */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 var(--color-shadow);
  --shadow-md: 0 4px 6px -1px var(--color-shadow);
  --shadow-lg: 0 10px 15px -3px var(--color-shadow);
  --shadow-xl: 0 20px 25px -5px var(--color-shadow);
}

/* ============================================
   NACHT-MODUS
   ============================================ */

[data-theme="night"] {
  /* Dunkle Pastellfarben */
  --color-primary: #8B5A7A;        /* Dunkles Mauve */
  --color-secondary: #5A7BA8;      /* Gedämpftes Blau */
  --color-accent: #B8936F;         /* Karamell */
  
  /* Kategorie-Farben (gedämpft) */
  --color-animals: #9D8B7A;        /* Erdton */
  --color-space: #6B5B8E;          /* Dunkellila */
  --color-pirates: #5A7BA8;        /* Nachtblau */
  --color-horses: #8B5A7A;         /* Weinrot */
  --color-adventure: #6B8B6B;      /* Waldgrün */
  --color-magic: #8B6B8E;          /* Pflaume */
  
  /* Dunkle Hintergründe */
  --color-bg-primary: #1A1A2E;     /* Tiefblau-Schwarz */
  --color-bg-secondary: #252541;   /* Dunkellila */
  --color-bg-tertiary: #2A2A3E;    /* Anthrazit */
  
  --color-text-primary: #E8E8F0;   /* Hellgrau - gut lesbar */
  --color-text-secondary: #B8B8C8; /* Mittelgrau */
  --color-text-muted: #8A8A9A;     /* Gedämpft */
  
  --color-border: #3A3A4E;         /* Dunkle Rahmen */
  --color-shadow: rgba(0, 0, 0, 0.3); /* Stärkere Schatten */
  
  /* UI-Farben (gedämpft) */
  --color-success: #6B8B6B;
  --color-warning: #B8936F;
  --color-error: #A86B6B;
  --color-info: #5A7BA8;
  
  /* Sternenhimmel aktivieren */
  --star-opacity: 1;
}

/* ============================================
   System-Präferenz automatisch erkennen
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    /* Automatisch Nachtmodus, wenn System dunkel ist */
    --color-primary: #8B5A7A;
    --color-secondary: #5A7BA8;
    --color-accent: #B8936F;
    --color-bg-primary: #1A1A2E;
    --color-bg-secondary: #252541;
    --color-bg-tertiary: #2A2A3E;
    --color-text-primary: #E8E8F0;
    --color-text-secondary: #B8B8C8;
    --color-text-muted: #8A8A9A;
    --color-border: #3A3A4E;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --star-opacity: 1;
  }
}

/* ============================================
   Basis-Styles
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color var(--transition-normal), 
              color var(--transition-normal);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ============================================
   Typografie
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ============================================
   Desktop Anpassungen
   ============================================ */

@media (min-width: 768px) {
  :root {
    --text-xs: 0.875rem;   /* 14px */
    --text-sm: 1rem;       /* 16px */
    --text-base: 1.125rem; /* 18px */
    --text-lg: 1.25rem;    /* 20px */
    --text-xl: 1.5rem;     /* 24px */
    --text-2xl: 2rem;      /* 32px */
    --text-3xl: 2.5rem;    /* 40px */
    --text-4xl: 3rem;      /* 48px */
  }
}

/* ============================================
   Sternenhimmel-Hintergrund (Nachtmodus)
   ============================================ */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: var(--star-opacity);
  pointer-events: none;
  z-index: -1;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 15% 60%, white, transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: twinkle 8s ease-in-out infinite;
  transition: opacity var(--transition-normal);
}

@keyframes twinkle {
  0%, 100% {
    opacity: var(--star-opacity);
    background-position: 0% 0%;
  }
  50% {
    opacity: calc(var(--star-opacity) * 0.7);
    background-position: 100% 100%;
  }
}

/* ============================================
   Utility Classes
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), 
              box-shadow var(--transition-fast);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.btn {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #E91E63 0%, #D81B60 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #C2185B 0%, #AD1457 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(216, 27, 96, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: white;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #357ABD 0%, #2868A8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

/* Responsive Grid */
.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}