/* Red Code Service — wspólne nadpisania marki (czerwień #dc2626 zamiast fioletu Tailwinda).
   Wczytywane PO tailwind.css, więc nadpisuje wygenerowane utility.
   Wyodrębnione z inline <style> każdej strony (SEO-12, deduplikacja). */
:root {
    --accent-200: #fecaca;
    --accent-300: #fca5a5;
    --accent-400: #f87171;
    --accent-500: #dc2626;
    --accent-600: #b91c1c;
    --accent-700: #991b1b;
    --accent-900: #7f1d1d;
}
.text-purple-200 { color: var(--accent-200); }
.text-purple-300 { color: var(--accent-300); }
.text-purple-400 { color: var(--accent-400); }
.text-purple-500 { color: var(--accent-500); }
.text-purple-900 { color: var(--accent-900); }
.bg-purple-600 { background-color: var(--accent-600); }
.bg-purple-700 { background-color: var(--accent-700); }
.bg-purple-900 { background-color: var(--accent-900); }
.bg-purple-900\/20 { background-color: rgba(127, 29, 29, 0.2); }
.bg-purple-900\/30 { background-color: rgba(127, 29, 29, 0.3); }
.border-purple-500 { border-color: var(--accent-500); }
.border-purple-500\/30 { border-color: rgba(220, 38, 38, 0.3); }
.border-purple-500\/50 { border-color: rgba(220, 38, 38, 0.5); }
.from-purple-400 { --tw-gradient-from: var(--accent-400); }
.from-purple-900\/20 { --tw-gradient-from: rgba(127, 29, 29, 0.2); }
.to-purple-600 { --tw-gradient-to: var(--accent-600); }
.hover\:bg-purple-500:hover { background-color: var(--accent-500); }
.hover\:bg-purple-700:hover { background-color: var(--accent-700); }
.hover\:text-purple-300:hover { color: var(--accent-300); }
.hover\:text-purple-500:hover { color: var(--accent-500); }
.hover\:border-purple-500:hover { border-color: var(--accent-500); }
.focus\:border-purple-500:focus { border-color: var(--accent-500); }
.accent-purple-500 { accent-color: var(--accent-500); }

/* Hero jako semantyczny <img> (SEO-1b) — obraz pod treścią, przyciemnienie nakładką */
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; }