/* ============================================================================
   WIZARDLY — "Neon Spell" Design System
   main.css — Custom properties, typography, spacing, base elements, responsive
   ============================================================================ */

/* ── Custom Properties ── */
:root {
    /* Brand colours */
    --wz-primary: #7c3aed;          /* Vivid purple */
    --wz-primary-light: #a78bfa;
    --wz-primary-dark: #5b21b6;
    --wz-accent: #06b6d4;           /* Cyan accent */
    --wz-accent-light: #67e8f9;
    --wz-success: #22c55e;
    --wz-warning: #f59e0b;
    --wz-danger: #ef4444;

    /* Surfaces */
    --wz-bg: #0a0a1a;              /* Deep space */
    --wz-bg-raised: #111128;       /* Card/panel bg */
    --wz-bg-overlay: rgba(10, 10, 26, 0.85);
    --wz-surface: rgba(255, 255, 255, 0.04);
    --wz-surface-hover: rgba(255, 255, 255, 0.08);
    --wz-border: rgba(255, 255, 255, 0.08);
    --wz-border-hover: rgba(255, 255, 255, 0.16);

    /* Text */
    --wz-text: #ffffff;
    --wz-text-secondary: rgba(255, 255, 255, 0.7);
    --wz-text-muted: rgba(255, 255, 255, 0.45);

    /* Glow effects */
    --wz-glow-purple: 0 0 40px rgba(124, 58, 237, 0.3);
    --wz-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.3);

    /* Gradients */
    --wz-gradient-hero: radial-gradient(ellipse at 30% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
                         radial-gradient(ellipse at 70% 60%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    --wz-gradient-cta: linear-gradient(135deg, var(--wz-primary), var(--wz-accent));
    --wz-gradient-text: linear-gradient(135deg, var(--wz-primary-light), var(--wz-accent));

    /* Spacing scale (4px base) */
    --wz-space-1: 4px;
    --wz-space-2: 8px;
    --wz-space-3: 12px;
    --wz-space-4: 16px;
    --wz-space-5: 20px;
    --wz-space-6: 24px;
    --wz-space-8: 32px;
    --wz-space-10: 40px;
    --wz-space-12: 48px;
    --wz-space-16: 64px;
    --wz-space-20: 80px;
    --wz-space-24: 96px;
    --wz-space-32: 128px;

    /* Typography */
    --wz-font-light: 'Gilroy-Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wz-font-bold: 'Gilroy-ExtraBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radii */
    --wz-radius-sm: 6px;
    --wz-radius: 12px;
    --wz-radius-lg: 16px;
    --wz-radius-xl: 24px;
    --wz-radius-full: 9999px;

    /* Transitions */
    --wz-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --wz-duration: 0.25s;

    /* Layout */
    --wz-max-width: 1200px;
    --wz-nav-height: 72px;
}


/* ── Typography — @font-face ── */
@font-face {
    font-family: 'Gilroy-Light';
    src: url('/static/fonts/Gilroy-Light.woff2') format('woff2'),
         url('/static/fonts/Gilroy-Light.woff') format('woff'),
         url('/static/fonts/Gilroy-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-ExtraBold';
    src: url('/static/fonts/Gilroy-ExtraBold.woff2') format('woff2'),
         url('/static/fonts/Gilroy-ExtraBold.woff') format('woff'),
         url('/static/fonts/Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--wz-font-light);
    background: var(--wz-bg);
    color: var(--wz-text-secondary);
    line-height: 1.6;
    min-height: 100vh;
}

/* Override parent base template */
.main-content {
    align-items: stretch;
    width: 100%;
    padding-top: 0;
}


/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wz-font-bold);
    color: var(--wz-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    margin: 0 0 var(--wz-space-5) 0;
    line-height: 1.7;
}

a {
    color: var(--wz-accent);
    text-decoration: none;
    transition: color var(--wz-duration) var(--wz-ease);
}

a:hover {
    color: var(--wz-accent-light);
}

strong, b {
    font-family: var(--wz-font-bold);
    color: var(--wz-text);
}

.wz-text-gradient {
    background: var(--wz-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wz-label {
    display: inline-block;
    font-family: var(--wz-font-bold);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wz-accent);
    margin-bottom: var(--wz-space-4);
}


/* ── Layout ── */
.wz-container {
    width: 100%;
    max-width: var(--wz-max-width);
    margin: 0 auto;
    padding: 0 var(--wz-space-6);
}

.wz-section {
    padding: var(--wz-space-24) 0;
}

.wz-section-dark {
    background: rgba(0, 0, 0, 0.25);
}

.wz-section-title {
    font-size: 40px;
    margin-bottom: var(--wz-space-4);
}

.wz-section-subtitle {
    font-size: 18px;
    color: var(--wz-text-secondary);
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: var(--wz-space-10);
}

.wz-text-center { text-align: center; }
.wz-text-center .wz-section-subtitle { margin-left: auto; margin-right: auto; }

.wz-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wz-space-6);
}

.wz-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wz-space-6);
}

.wz-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wz-space-6);
}


/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {
    h1 { font-size: 44px; }
    h2 { font-size: 34px; }
    .wz-section-title { font-size: 34px; }
    .wz-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --wz-nav-height: 60px;
    }

    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    .wz-section { padding: var(--wz-space-16) 0; }
    .wz-section-title { font-size: 28px; }
    .wz-section-subtitle { font-size: 16px; }
    .wz-container { padding: 0 var(--wz-space-5); }
    .wz-grid-2 { grid-template-columns: 1fr; }
    .wz-grid-3 { grid-template-columns: 1fr; }
    .wz-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    .wz-section { padding: var(--wz-space-12) 0; }
}


/* ── Utility Classes ── */
.wz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wz-fade-in {
    animation: wzFadeIn 0.6s var(--wz-ease) both;
}

@keyframes wzFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

img {
    max-width: 100%;
    height: auto;
}