/* CSS Variablen fuer Farben und andere wiederkehrende Werte */
/* Zentrale Farbquelle fuer Tailwind und klassische CSS-Dateien */

:root {
    /* Zentrale Tattoo-Farben */
    --tattoo-cream: #f5f5dc;
    --tattoo-black: #000000;
    --tattoo-gray: #333333;
    --tattoo-dark: #1a1a1a;
    --tattoo-accent: #8b0000;

    /* RGB-Varianten fuer Tailwind-Opacity-Support */
    --tattoo-cream-rgb: 245 245 220;
    --tattoo-black-rgb: 0 0 0;
    --tattoo-gray-rgb: 51 51 51;
    --tattoo-dark-rgb: 26 26 26;
    --tattoo-accent-rgb: 139 0 0;

    /* Legacy-Aliases (fuer bestehende CSS-Dateien) */
    --farbe-cremeweiss: var(--tattoo-cream);
    --farbe-dunkelgrau: #404040;
    --farbe-schwarz: var(--tattoo-black);

    /* Abgeleitete Farben */
    --farbe-hintergrund: var(--farbe-schwarz);
    --farbe-text: var(--farbe-cremeweiss);
    --farbe-akzent: var(--tattoo-accent);
    --farbe-hover: #606060;

    /* Typografie */
    --schriftart-haupt: 'Montserrat', sans-serif;
    --schriftgroesse-basis: 16px;
    --schriftgroesse-gross: 2rem;
    --schriftgroesse-mittel: 1.5rem;
    --schriftgroesse-klein: 0.875rem;

    /* Abstände */
    --abstand-klein: 0.5rem;
    --abstand-mittel: 1rem;
    --abstand-gross: 2rem;
    --abstand-sehr-gross: 4rem;

    /* Schatten */
    --schatten-leicht: 0 2px 4px rgba(0, 0, 0, 0.1);
    --schatten-stark: 0 4px 8px rgba(0, 0, 0, 0.3);

    /* Übergänge */
    --uebergang-schnell: 0.2s ease;
    --uebergang-normal: 0.3s ease;
    --uebergang-langsam: 0.5s ease;

    /* Maximale Breite für Container */
    --breite-max: 1200px;
}