/* Objective: Centralize the YERTAL brand DNA and shared logic */

:root {
    --neon-color: #00f2ff;
    --accent-color: #3b82f6;
    --nav-font: 'Inter', sans-serif;
    --nav-weight: 800;
    --card-blur: 15px;
    --btn-radius: 12px;
    --nav-text-color: #ffffff;
    --nav-hover-color: #00f2ff;
    --bg-color: #050505;
    --text-color: #f8fafc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    letter-spacing: -0.05em;
    font-synthesis: none;
}

/* Auth Bouncer Visibility */
.auth-locked { opacity: 0; pointer-events: none; }
.auth-cleared { opacity: 1; transition: opacity 0.5s ease-in; }

/* Shared Typography */
html body h1, html body h2, html body h3, html body .surreal-3d-btn {
    font-family: var(--nav-font);
    font-weight: var(--nav-weight);
}

/* Icon Core Logic */
.fas, .far, .fab, .fa, .card-icon-badge i, .action-card i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
}

/* Shared Glassmorphism */
.glass {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(var(--card-blur));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- GLOBAL LAYOUT ENGINE --- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Grid Logic for Showcase/Experiment Zones */
.grid-container {
 display: grid;
 gap: 1.5rem;
 width: 100%;
}

@media (min-width: 1024px) {
 .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
 .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) and (min-width: 641px) {
 .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
 .grid-container { gap: 1rem; }
 .grid-cols-4, .grid-cols-3 { grid-template-columns: 1fr; }
 .hero-compact { padding-top: 2rem; }
 .text-4xl { font-size: 1.75rem; }
 .surreal-3d-btn { width: 100%; padding: 1rem; }
}

/* Spacing & Utilities */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-width-limit { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.w-full { width: 100%; }
.hero-compact { padding-top: 4rem; padding-bottom: 2rem; }
.hero-showroom { padding-top: 10rem; padding-bottom: 6rem; }