@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700;800&display=swap');

/* design tokens - change these and everything updates */
:root {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-alt: #f1f5f9;

    --text-main: #0f172a;
    --text-muted: #475569;

    --border-color: #e2e8f0;
    --nav-bg: rgba(255, 255, 255, 0.85);

    --primary: #6366f1;
    --primary-hover: #4f46e5;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* element colors */
    --el-earth: #32cd32;
    --el-fire: #ff4e00;
    --el-fire-grad: linear-gradient(135deg, #ff4e00, #ec9f05);
    --el-water: #1e90ff;
    --el-air: #ffffff;
    --el-air-border: #d1d5db;
    --el-chi: #fcd34d;
    --el-light: #00ffff;
    --el-dark: #191970;
}

/* dark mode overrides */
[data-theme="dark"] {
    --bg-base: #09090b;
    --bg-surface: #18181b;
    --bg-alt: #131316;

    --text-main: #fafafa;
    --text-muted: #a1a1aa;

    --border-color: #27272a;
    --nav-bg: rgba(9, 9, 11, 0.85);

    --primary: #818cf8;
    --primary-hover: #6366f1;

    --el-air-border: #3f3f46;
    --el-dark: #0f172a;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-base);
    color: var(--text-main);
    transition: background-color 0.4s ease, color 0.4s ease;
    position: relative;
}

/* subtle dot grid in the background */
.bg-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -10;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

.navbar-glass {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

/* floating glow blobs behind hero section */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: float 15s ease-in-out infinite alternate;
    z-index: -1;
}
[data-theme="dark"] .glow-orb { opacity: 0.25; }

.element-card {
    transition: var(--transition);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}
.element-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
}

.el-icon { transition: var(--transition); }

/* element color classes */
.el-earth { color: var(--el-earth); }
.el-fire  { color: var(--el-fire); }
.el-water { color: var(--el-water); }
.el-air   { color: var(--text-main); }
.el-chi   { color: var(--el-chi); }
.el-light { color: var(--el-light); }
.el-dark  { color: var(--el-dark); }

[data-theme="light"] .el-air { border-color: var(--el-air-border); }