/* ═══════════════════════════════════════════════
 * AG Global Design Tokens
 * ═══════════════════════════════════════════════
 * Site-wide CSS custom properties.
 * Applied via the Astra child theme on every page.
 * Components reference these with var(--site-*).
 * ─────────────────────────────────────────────── */

:root {
    /* ── Colors ────────────────────────────────── */
    --site-color-primary:     #2563eb;
    --site-color-primary-rgb: 37, 99, 235;
    --site-color-secondary:   #7c3aed;
    --site-color-accent:      #06b6d4;
    --site-color-dark:        #0f172a;
    --site-color-dark-rgb:    15, 23, 42;
    --site-color-light:       #f8fafc;
    --site-color-light-rgb:   248, 250, 252;
    --site-color-text:        #1e293b;
    --site-color-text-muted:  #64748b;
    --site-color-border:      #e2e8f0;

    /* ── Typography ────────────────────────────── */
    --site-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --site-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --site-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --site-fs-xs:   0.75rem;   /* 12px */
    --site-fs-sm:   0.875rem;  /* 14px */
    --site-fs-base: 1rem;      /* 16px */
    --site-fs-lg:   1.125rem;  /* 18px */
    --site-fs-xl:   1.25rem;   /* 20px */
    --site-fs-2xl:  1.5rem;    /* 24px */
    --site-fs-3xl:  1.875rem;  /* 30px */
    --site-fs-4xl:  2.25rem;   /* 36px */
    --site-fs-5xl:  3rem;      /* 48px */
    --site-fs-6xl:  3.75rem;   /* 60px */

    --site-lh-tight:  1.2;
    --site-lh-normal: 1.6;
    --site-lh-loose:  1.8;

    --site-fw-normal:   400;
    --site-fw-medium:   500;
    --site-fw-semibold: 600;
    --site-fw-bold:     700;

    /* ── Spacing scale ─────────────────────────── */
    --site-space-1:  0.25rem;  /* 4px  */
    --site-space-2:  0.5rem;   /* 8px  */
    --site-space-3:  0.75rem;  /* 12px */
    --site-space-4:  1rem;     /* 16px */
    --site-space-5:  1.25rem;  /* 20px */
    --site-space-6:  1.5rem;   /* 24px */
    --site-space-8:  2rem;     /* 32px */
    --site-space-10: 2.5rem;   /* 40px */
    --site-space-12: 3rem;     /* 48px */
    --site-space-16: 4rem;     /* 64px */
    --site-space-20: 5rem;     /* 80px */
    --site-space-24: 6rem;     /* 96px */

    /* ── Layout ────────────────────────────────── */
    --site-container-sm:  640px;
    --site-container-md:  768px;
    --site-container-lg:  1024px;
    --site-container-xl:  1200px;
    --site-container-2xl: 1400px;

    --site-radius-sm:   0.25rem;
    --site-radius-md:   0.5rem;
    --site-radius-lg:   0.75rem;
    --site-radius-xl:   1rem;
    --site-radius-full: 9999px;

    /* ── Shadows ───────────────────────────────── */
    --site-shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
    --site-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --site-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --site-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* ── Gradients ─────────────────────────────── */
    --site-grad-primary:   linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --site-grad-accent:    linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
    --site-grad-dark:      linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --site-grad-warm:      linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --site-grad-mesh:      radial-gradient(at 40% 20%, rgba(37,99,235,0.15) 0%, transparent 50%),
                           radial-gradient(at 80% 0%, rgba(124,58,237,0.12) 0%, transparent 50%),
                           radial-gradient(at 0% 50%, rgba(6,182,212,0.1) 0%, transparent 50%);

    /* ── Glass / Blur ──────────────────────────── */
    --site-glass-bg:       rgba(255, 255, 255, 0.06);
    --site-glass-border:   rgba(255, 255, 255, 0.1);
    --site-glass-blur:     12px;
    --site-glass-dark-bg:  rgba(15, 23, 42, 0.6);

    /* ── Glow ──────────────────────────────────── */
    --site-glow-primary: 0 0 20px rgba(37, 99, 235, 0.35), 0 0 60px rgba(37, 99, 235, 0.15);
    --site-glow-accent:  0 0 20px rgba(6, 182, 212, 0.35), 0 0 60px rgba(6, 182, 212, 0.15);
    --site-glow-soft:    0 0 40px rgba(124, 58, 237, 0.1);

    /* ── Transitions ──────────────────────────── */
    --site-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --site-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --site-ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --site-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --site-duration:     300ms;
    --site-duration-slow: 600ms;
    --site-duration-fast: 150ms;
}

/* ── Reduced-motion global override ────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --site-duration: 0ms;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}