/* * GLOBAL VARIABLES & THEME CONFIG
 * Basierend auf Figma global.css
 * Google Fonts Import entfernt -> Bitte via Yabe Webfonts laden!
 */

:root {
  --font-size: 16px;
  /* Bitte sicherstellen, dass diese Namen exakt mit deinen Yabe-Fonts übereinstimmen */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-accent: 'Crimson Text', serif;
  
  /* Artist Color Palette - LIGHT MODE */
  --background: #F9F9F9;
  --foreground: #1A1A1A;
  --card: #F9F9F9;
  --card-foreground: #1A1A1A;
  --popover: #F9F9F9;
  --popover-foreground: #1A1A1A;
  --primary: #000000;
  --primary-foreground: #F9F9F9;
  --secondary: #F9F9F9;
  --secondary-foreground: #1A1A1A;
  --muted: #E5E5E5;
  --muted-foreground: #595959; /* WCAG AA optimized */
  --accent: #000000;
  --accent-foreground: #F9F9F9;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(26, 26, 26, 0.1);
  --input: transparent;
  --input-background: #ffffff;
  --ring: #1A1A1A;
  --radius: 0.625rem;
}

/* DIMMED MODE (ehemals Dark Mode) */
.dark {
  /* Hintergrund wird grau, Kunst bleibt auf weißer Wand (--card) */
  --background: #E5E5E5;
  --foreground: #1A1A1A;
  
  /* White walls for artwork */
  --card: #F9F9F9;
  --card-foreground: #1A1A1A;
  --popover: #F9F9F9;
  --popover-foreground: #1A1A1A;
  
  --primary: #000000;
  --primary-foreground: #F9F9F9;
  --secondary: #F9F9F9;
  --secondary-foreground: #1A1A1A;
  --muted: #D0D0D0;
  --muted-foreground: #4A4A4A;
  
  --accent: #000000;
  --accent-foreground: #F9F9F9;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(26, 26, 26, 0.15);
  --input: transparent;
  --input-background: #F9F9F9;
  --ring: #1A1A1A;
}

/* BASE STYLES */
html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  /* Sanfte Transition für Theme-Wechsel auf Hauptelementen */
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}

/* Gezielte Transition für andere Hauptelemente */
nav, footer, .bg-background, .bg-card, [role="dialog"] {
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.5;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

blockquote, figcaption, .caption, .font-accent {
  font-family: var(--font-accent);
  font-style: italic;
}

/* Utility Classes Ersatz (da wir kein Tailwind haben) */
.container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Accessibility Focus Styles */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  button, a[role="button"], input[type="submit"], select {
    min-height: 44px; /* Minimum touch target size */
  }
}