/*
 * DOSYA: community/static/css/tailwind-extend.css
 * DURUM: v1.0 — XYZ Custom Tailwind Extension
 * GÖREV: CDN tailwindcss.com → self-hosted migration supplement
 *        Provides custom color tokens + responsive classes missing from COM purge
 *
 * NOTE: This file is loaded AFTER tailwind.min.css (COM shared) which
 *       provides the base utilities. This file adds XYZ-specific tokens
 *       and any responsive/variant classes pruned from the COM build.
 */

/* ═══════════════════════════════════════════════════════
   1) CUSTOM COLOR TOKENS (from XYZ tailwind.config)
   ═══════════════════════════════════════════════════════ */

/* --- Background Colors --- */
.bg-dark-bg       { background-color: #050508 !important; }
.bg-dark-bg\/90   { background-color: rgba(5,5,8,0.9) !important; }
.bg-dark-card     { background-color: #0a0a0f !important; }
.bg-neon-red      { background-color: #ff2a3c !important; }
.bg-neon-red\/10  { background-color: rgba(255,42,60,0.1) !important; }
.bg-neon-green\/10 { background-color: rgba(0,255,157,0.1) !important; }
.bg-red-400\/10   { background-color: rgba(248,113,113,0.1) !important; }
.bg-red-500\/10   { background-color: rgba(239,68,68,0.1) !important; }

/* --- Text Colors --- */
.text-neon-red    { color: #ff2a3c !important; }
.text-neon-green  { color: #00ff9d !important; }
.text-neon-blue   { color: #00f3ff !important; }
.text-neon-yellow { color: #ffd700 !important; }

/* --- Border Colors --- */
.border-dark-border    { border-color: #1a1a2e !important; }
.border-neon-red\/20   { border-color: rgba(255,42,60,0.2) !important; }
.border-neon-red\/30   { border-color: rgba(255,42,60,0.3) !important; }
.border-neon-red\/40   { border-color: rgba(255,42,60,0.4) !important; }
.border-neon-green\/40 { border-color: rgba(0,255,157,0.4) !important; }
.border-red-400\/20    { border-color: rgba(248,113,113,0.2) !important; }
.border-red-500\/30    { border-color: rgba(239,68,68,0.3) !important; }
.border-t-neon-red     { border-top-color: #ff2a3c !important; }

/* ═══════════════════════════════════════════════════════
   2) HOVER / FOCUS VARIANTS
   ═══════════════════════════════════════════════════════ */

.hover\:bg-neon-red\/20:hover    { background-color: rgba(255,42,60,0.2) !important; }
.hover\:bg-neon-green\/20:hover  { background-color: rgba(0,255,157,0.2) !important; }
.hover\:bg-red-500\/20:hover     { background-color: rgba(239,68,68,0.2) !important; }
.hover\:border-neon-red\/30:hover   { border-color: rgba(255,42,60,0.3) !important; }
.hover\:border-neon-red\/60:hover   { border-color: rgba(255,42,60,0.6) !important; }
.hover\:border-neon-green\/30:hover { border-color: rgba(0,255,157,0.3) !important; }
.hover\:border-neon-green\/60:hover { border-color: rgba(0,255,157,0.6) !important; }
.hover\:border-neon-blue\/30:hover  { border-color: rgba(0,243,255,0.3) !important; }
.hover\:text-neon-red:hover      { color: #ff2a3c !important; }
.hover\:underline:hover           { text-decoration: underline !important; }

.focus\:border-neon-red\/50:focus { border-color: rgba(255,42,60,0.5) !important; }
.focus\:outline-none:focus        { outline: none !important; }
.focus\:ring-1:focus              { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(255,42,60,0.3)) !important; }
.focus\:ring-neon-red\/30:focus   { --tw-ring-color: rgba(255,42,60,0.3); box-shadow: 0 0 0 1px rgba(255,42,60,0.3) !important; }

/* ═══════════════════════════════════════════════════════
   3) MISSING BASE UTILITIES
   ═══════════════════════════════════════════════════════ */

/* flex / layout */
.flex-1       { flex: 1 1 0% !important; }
.font-sans    { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* spacing */
.gap-1\.5  { gap: 0.375rem !important; }
.py-1\.5   { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-8      { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-16     { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.mb-16     { margin-bottom: 4rem !important; }

/* sizing */
.h-1\.5    { height: 0.375rem !important; }
.w-1\.5    { width: 0.375rem !important; }
.h-\[400px\] { height: 400px !important; }
.max-w-sm  { max-width: 24rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-7xl { max-width: 80rem !important; }

/* text */
.text-base      { font-size: 1rem; line-height: 1.5rem; }
.text-\[9px\]   { font-size: 9px !important; }
.text-\[10px\]  { font-size: 10px !important; }

/* shadows (XYZ neon glow) */
.shadow-\[0_0_14px_rgba\(255\,42\,60\,0\.25\)\]  { box-shadow: 0 0 14px rgba(255,42,60,0.25) !important; }
.shadow-\[0_0_15px_rgba\(0\,255\,157\,0\.15\)\]   { box-shadow: 0 0 15px rgba(0,255,157,0.15) !important; }
.shadow-\[0_0_15px_rgba\(255\,42\,60\,0\.15\)\]   { box-shadow: 0 0 15px rgba(255,42,60,0.15) !important; }
.shadow-\[0_0_30px_rgba\(255\,42\,60\,0\.15\)\]   { box-shadow: 0 0 30px rgba(255,42,60,0.15) !important; }
.shadow-\[0_0_30px_rgba\(255\,42\,60\,0\.2\)\]    { box-shadow: 0 0 30px rgba(255,42,60,0.2) !important; }

/* z-index */
.z-\[100\] { z-index: 100 !important; }

/* animation */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════════
   4) RESPONSIVE GRID CLASSES (missing from COM purge)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .md\:block       { display: block !important; }
    .md\:flex        { display: flex !important; }
    .md\:inline      { display: inline !important; }
    .md\:flex-row    { flex-direction: row !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .md\:py-24       { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .md\:text-6xl    { font-size: 3.75rem !important; line-height: 1 !important; }
    .md\:text-base   { font-size: 1rem !important; line-height: 1.5rem !important; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:inline      { display: inline !important; }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}