/**
 * variables.css
 * Design-Token-System "Tag-Bogen": eine Palette, die den Bogen eines
 * Tages abbildet (Void -> Dawn -> Day -> Dusk -> Night). Die Namen sind
 * bewusst gewaehlt, damit Farbe und Konzept zusammenpassen.
 */
:root,
[data-theme="dark"] {
  /* Flaechen */
  --void: #0b0b12;
  --void-2: #14151f;
  --void-3: #1c1e2c;
  --void-4: #262838;

  --border-subtle: rgba(241, 240, 247, 0.06);
  --border-default: rgba(241, 240, 247, 0.11);
  --border-strong: rgba(241, 240, 247, 0.18);

  /* Text */
  --moon: #f1f0f7;
  --mist: #9795ac;
  --mist-dim: #5b5972;

  /* Akzente */
  --dusk: #8c7cf0;
  --dusk-dim: #6e5fc4;
  --dusk-soft: rgba(140, 124, 240, 0.14);
  --dawn: #ff8f6b;
  --dawn-soft: rgba(255, 143, 107, 0.14);

  --meadow: #5fd9a0;
  --amber: #ffc864;
  --rose: #ff6b8b;
  --tide: #4dd4c8;
  --bloom: #c9a6ff;
  --night-blue: #6a6fe0;

  /* Kategorie-Farben (Zuordnung zu den Akzenten) */
  --cat-work: var(--dusk);
  --cat-focus: var(--tide);
  --cat-break: var(--bloom);
  --cat-exercise: var(--meadow);
  --cat-food: var(--amber);
  --cat-leisure: var(--dawn);
  --cat-social: var(--rose);
  --cat-sleep: var(--night-blue);
  --cat-checkin: var(--bloom);

  --success: var(--meadow);
  --danger: var(--rose);

  /* Schatten */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 0 0 1px var(--border-default), 0 12px 36px rgba(140, 124, 240, 0.14);

  /* Radien */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Abstaende */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typografie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

[data-theme="light"] {
  --void: #f7f6fb;
  --void-2: #ffffff;
  --void-3: #ffffff;
  --void-4: #eeecf6;

  --border-subtle: rgba(20, 18, 40, 0.06);
  --border-default: rgba(20, 18, 40, 0.1);
  --border-strong: rgba(20, 18, 40, 0.18);

  --moon: #17151f;
  --mist: #615f76;
  --mist-dim: #9997ac;

  --dusk-soft: rgba(124, 108, 230, 0.1);
  --dawn-soft: rgba(255, 143, 107, 0.16);

  --shadow-sm: 0 2px 10px rgba(20, 18, 40, 0.06);
  --shadow-md: 0 10px 28px rgba(20, 18, 40, 0.09);
  --shadow-glow: 0 0 0 1px var(--border-default), 0 12px 32px rgba(124, 108, 230, 0.1);

  color-scheme: light;
}

/* Tag-Bogen: das Hintergrund-Glow-Band veraendert sich mit der Tageszeit.
   Dies ist das wiederkehrende Signatur-Element der App. */
[data-time-band="night"] { --band-a: rgba(106, 111, 224, 0.16); --band-b: rgba(140, 124, 240, 0.05); }
[data-time-band="dawn"]  { --band-a: rgba(255, 143, 107, 0.16); --band-b: rgba(255, 200, 100, 0.06); }
[data-time-band="day"]   { --band-a: rgba(140, 124, 240, 0.14); --band-b: rgba(77, 212, 200, 0.05); }
[data-time-band="dusk"]  { --band-a: rgba(255, 143, 107, 0.14); --band-b: rgba(201, 166, 255, 0.07); }