/* =================================================================
   Zentrale Farbdefinitionen für die gesamte Website
   ================================================================= */

:root {
    /* ========== Hauptfarbpalette ========== */
    --color-primary: #2C2F48;
    --color-primary-dark: #1a365d;
    --color-primary-darker: #1E2530;
    
    --color-secondary: #F25C3C;
    --color-secondary-alt: #E77C3C;
    --color-secondary-dark: #2d5a87;
    
    --color-accent: #E2E6F5;
    --color-accent-alt: #F2F3F5;
    --color-accent-light: #f7fafc;
    
    /* ========== Textfarben ========== */
    --color-text-primary: #111827;
    --color-text-primary-alt: #2d3748;
    --color-text-secondary: #4B5563;
    --color-text-secondary-alt: #4a5568;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-text-dark: #374151;
    --color-text-darkest: #1f2937;
    --color-text-white: #FFFFFF;
    --color-text-light: #D1D5DB;
    
    /* ========== Hintergrundfarben ========== */
    --color-bg-light: #F9FAFB;
    --color-bg-lighter: #FAFAFA;
    --color-bg-gray: #f3f4f6;
    --color-bg-gray-light: #F3F4F6;
    --color-bg-gray-medium: #E8EAED;
    --color-bg-gray-darker: #F0F1F3;
    
    --color-bg-dark: #1a1f2c;
    --color-bg-dark-alt: #1a202c;
    --color-bg-darker: #1E2530;
    --color-bg-darkest: #2D3440;
    --color-bg-slate: #3A4354;
    --color-bg-slate-dark: #4A5568;
    
    /* ========== Border & Divider Farben ========== */
    --color-border-light: #D1D5DB;
    --color-border-medium: #9CA3AF;
    --color-border-dark: #4B5563;
    
    /* ========== Spezialfarben ========== */
    --color-highlight: #FCE6D6;
    --color-focus: #3F20FB;
    
    /* ========== Scrollbar Farben ========== */
    --color-scrollbar-track: #f1f1f1;
    --color-scrollbar-thumb: #888;
    --color-scrollbar-thumb-hover: #555;
    
    /* ========== Stammbaum SVG Farben ========== */
    /* Männliche Knoten */
    --color-node-male-fill: #EBF3FA;
    --color-node-male-stroke: #4A7BA7;
    --color-node-male-fill-hover: #D6E8F7;
    --color-node-male-stroke-hover: #2E5A7D;
    
    /* Weibliche Knoten */
    --color-node-female-fill: #FAEBEC;
    --color-node-female-stroke: #C05B7C;
    --color-node-female-fill-hover: #F4D6DA;
    --color-node-female-stroke-hover: #A0476A;
    
    /* Besondere Knoten */
    --color-node-special-fill: #fef3c7;
    --color-node-special-stroke: #f59e0b;
    --color-node-special-fill-hover: #fde68a;
    --color-node-special-stroke-hover: #d97706;
    
    /* Linien */
    --color-line-primary: #1a365d;
    --color-line-secondary: #9ca3af;
    
    /* ========== Hover States ========== */
    --color-hover-overlay: rgb(55 62 74);
    
    /* ========== Transparente Farben (RGBA) ========== */
    --color-shadow-sm: rgba(0, 0, 0, 0.08);
    --color-shadow-md: rgba(0, 0, 0, 0.12);
    --color-shadow-lg: rgba(0, 0, 0, 0.15);
    --color-shadow-xl: rgba(0, 0, 0, 0.1);
    
    --color-primary-transparent-10: rgba(26, 54, 93, 0.1);
    --color-primary-transparent-20: rgba(26, 54, 93, 0.2);
    --color-primary-transparent-30: rgba(26, 54, 93, 0.3);
    
    --color-secondary-transparent-10: rgba(45, 90, 135, 0.1);
    --color-secondary-transparent-20: rgba(45, 90, 135, 0.2);
    
    --color-accent-transparent-20: rgba(247, 250, 252, 0.2);
    --color-accent-transparent-30: rgba(247, 250, 252, 0.3);
    
    --color-dark-transparent-10: rgba(26, 32, 44, 0.2);
    
    --color-border-transparent: rgba(209, 213, 219, 0.3);
    
    --color-focus-bg: rgba(63, 32, 251, 0.1);
    
    --color-overlay-primary: rgba(44, 47, 72, 0.7);
    
    /* Drop Shadow Farben */
    --color-shadow-male: rgba(74, 123, 167, 0.3);
    --color-shadow-female: rgba(192, 91, 124, 0.3);
    --color-shadow-special: rgba(245, 158, 11, 0.4);
    
    /* ========== Gradients ========== */
    /* Header Gradients */
    --gradient-header-primary: linear-gradient(to right, var(--color-primary-dark), var(--color-bg-dark-alt));
    --gradient-header-diagonal: linear-gradient(to bottom right, var(--color-primary-dark), var(--color-primary-dark), var(--color-bg-dark-alt));
    --gradient-header-transparent: linear-gradient(to right, rgba(26, 54, 93, 0.7), rgba(26, 32, 44, 0.7));
    
    /* Section Gradients */
    --gradient-section-dark: linear-gradient(to bottom right, var(--color-primary-dark), var(--color-bg-dark-alt));
    
    /* Hover Gradients */
    --gradient-primary-hover: linear-gradient(to bottom right, rgba(26, 54, 93, 0.2), rgba(26, 32, 44, 0.2));
    --gradient-primary-hover-light: linear-gradient(to bottom right, rgba(26, 54, 93, 0.1), rgba(26, 32, 44, 0.2));
    --gradient-secondary-hover: linear-gradient(to bottom right, rgba(45, 90, 135, 0.2), rgba(26, 54, 93, 0.2));
    --gradient-secondary-hover-light: linear-gradient(to bottom right, rgba(45, 90, 135, 0.1), rgba(26, 54, 93, 0.2));
    --gradient-accent-hover: linear-gradient(to bottom right, rgba(247, 250, 252, 0.3), rgba(26, 54, 93, 0.2));
    --gradient-accent-hover-alt: linear-gradient(to bottom right, rgba(247, 250, 252, 0.2), rgba(45, 90, 135, 0.2));
    
    /* ========== Box Shadows ========== */
    --shadow-sm: 0 1px 3px var(--color-shadow-md), 0 1px 2px var(--color-shadow-sm);
    --shadow-md: 0 2px 6px var(--color-shadow-lg), 0 1px 3px var(--color-shadow-xl);
    --shadow-focus: 0 0 0 3px var(--color-border-transparent);
    
    /* ========== Drop Shadows (für SVG Filter) ========== */
    --drop-shadow-base: drop-shadow(0 4px 6px var(--color-shadow-xl));
    --drop-shadow-male: drop-shadow(0 8px 15px var(--color-shadow-male));
    --drop-shadow-female: drop-shadow(0 8px 15px var(--color-shadow-female));
    --drop-shadow-special: drop-shadow(0 8px 15px var(--color-shadow-special));
}

/* =================================================================
   Utility Classes für häufig verwendete Farbkombinationen
   ================================================================= */

.bg-dark-card {
    background-color: var(--color-primary);
}

.bg-dark-card-secondary {
    background-color: #3d4159;
}

.bg-dark-card-tertiary {
    background-color: rgb(55 62 74);
}

.bg-gradient-light {
    background: linear-gradient(to right, var(--color-bg-gray-medium), var(--color-bg-gray-darker));
}

/* Header Gradient Utilities */
.bg-gradient-header {
    background: var(--gradient-header-primary);
    min-height: 600px;
    display: flex;
    align-items: center;
}

.bg-gradient-header-diagonal {
    background: var(--gradient-header-diagonal);
    min-height: 600px;
    display: flex;
    align-items: center;
}

.bg-gradient-header-transparent {
    background: var(--gradient-header-transparent);
}

.bg-gradient-section-dark {
    background: var(--gradient-section-dark);
}

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-white {
    color: var(--color-text-white);
}

.border-light {
    border-color: var(--color-border-light);
}

.border-medium {
    border-color: var(--color-border-medium);
}

/* Hover-Effekte */
.hover-bg-overlay {
    transition: background-color 0.2s ease;
}

.hover-bg-overlay:hover {
    background-color: var(--color-hover-overlay) !important;
}

/* Focus-Styles */
.focus-ring:focus {
    outline: 2px solid var(--color-focus);
    background-color: var(--color-focus-bg);
}

/* Schatten */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-focus {
    box-shadow: var(--shadow-focus);
}