/* ============================================================
   BASE.CSS — Variables, Reset, Typography, Animations
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
    /* Colors */
    --blue: #0647E0;
    --blue-hover: #0535B5;
    --blue-light: #3b82f6;
    --blue-glow: rgba(6, 71, 224, 0.35);
    --bg: #111827;
    --bg2: #1f2937;
    --bg3: #374151;
    --text: #f9fafb;
    --text2: #d1d5db;
    --text3: #9ca3af;
    --border: rgba(255, 255, 255, 0.08);
    --radius: 12px;
    --glow: 0 0 30px rgba(6, 71, 224, 0.3);
    /* Spacing scale */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 40px;
    --sp-2xl: 64px;
    /* Font families */
    --font-body: 'Space Grotesk', sans-serif;
    --font-display: 'Outfit', sans-serif;
}

/* ── Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-body);
    line-height: 1.5;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); }
p, span, a, li { font-family: var(--font-body); }

a { text-decoration: none; color: inherit; }
strong { font-weight: bold; }
small { font-size: 0.8rem; }

/* ── Animations ── */
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1);}
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1);}
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }

/* ── Utility Classes ── */
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--glow); }
.text-center { text-align: center; }

/* ── Responsive Container ── */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

/* ============================================================
   GRID SYSTEM — Tailwind Inspired
   ============================================================ */

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid gap */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* Responsive Grid */
@media (min-width: 640px) { .sm\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lg\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* Grid item */
.grid > div {
    background-color: var(--blue);
    color: var(--text);
    padding: var(--sp-md);
    border-radius: var(--radius);
    box-shadow: var(--glow);
    height: 8rem; /* default height */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 40px rgba(6, 71, 224, 0.5);
}

/* ============================================================
   END GRID SYSTEM
   ============================================================ */