/* ============================================================================
   ASPRYDE DESIGN SYSTEM — CSS VARIABLES + GLOBAL ANIMATIONS
   ============================================================================ */

:root {
    /* ── Backgrounds ──────────────────────────────────────── */
    --bg-primary:   #F8FAFC;
    --bg-secondary: #F1F5F9;
    --bg-tertiary:  #E2E8F0;
    --bg-card:      #FFFFFF;
    --bg-sidebar:   #E2E8F0; /* Noticeably darker than dashboard */
    --bg-overlay:   rgba(0,0,0,.5);

    /* ── Text ─────────────────────────────────────────────── */
    --text-primary:   #111827;
    --text-secondary: #4B5563;
    --text-tertiary:  #6B7280;
    --text-muted:     #9CA3AF;
    --text-inverse:   #FFFFFF;

    /* ── Borders ──────────────────────────────────────────── */
    --border-light:   #E5E7EB;
    --border-default: #D1D5DB;
    --border-dark:    #9CA3AF;
    --border-focus:   #2563EB;

    /* ── Accent ───────────────────────────────────────────── */
    --accent-primary:       #2563EB;
    --accent-primary-hover: #1D4ED8;
    --accent-primary-light: #DBEAFE;
    --accent-primary-dark:  #1E40AF;
    --accent-secondary:     #7C3AED;

    /* ── Gradients ────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg,#2563EB 0%,#7C3AED 100%);
    --gradient-dark:    linear-gradient(135deg,#1E40AF 0%,#5B21B6 100%);

    /* ── Status ───────────────────────────────────────────── */
    --success:       #059669;
    --success-light: #D1FAE5;
    --success-dark:  #047857;
    --warning:       #D97706;
    --warning-light: #FEF3C7;
    --warning-dark:  #B45309;
    --error:         #DC2626;
    --error-light:   #FEE2E2;
    --error-dark:    #B91C1C;
    --info:          #0284C7;
    --info-light:    #E0F2FE;
    --info-dark:     #0369A1;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

    /* ── Typography ───────────────────────────────────────── */
    --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --font-mono: 'JetBrains Mono','Fira Code',Consolas,monospace;

    --text-xs:   .75rem;
    --text-sm:   .875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;

    --tracking-tight:  -.025em;
    --tracking-normal:  0;
    --tracking-wide:    .025em;
    --tracking-wider:   .05em;

    /* ── Spacing ──────────────────────────────────────────── */
    --space-0:  0;
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Border Radius ────────────────────────────────────── */
    --radius-none: 0;
    --radius-sm:   .25rem;
    --radius-md:   .375rem;
    --radius-lg:   .5rem;
    --radius-xl:   .75rem;
    --radius-2xl:  1rem;
    --radius-3xl:  1.5rem;
    --radius-full: 9999px;

    /* ── Containers ───────────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;
    --transition-slower: 500ms ease;

    /* ── Z-index ──────────────────────────────────────────── */
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-modal-backdrop: 400;
    --z-modal:          500;
    --z-popover:        600;
    --z-tooltip:        700;
}

/* ── Dark Mode ────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg-primary:         #0F172A;
    --bg-secondary:       #1E293B;
    --bg-tertiary:        #334155;
    --bg-card:            #1E293B;
    --bg-sidebar:         #0F172A;
    --bg-overlay:         rgba(0,0,0,.7);
    --text-primary:       #F8FAFC;
    --text-secondary:     #E2E8F0;
    --text-tertiary:      #CBD5E1;
    --text-muted:         #94A3B8;
    --text-inverse:       #0F172A;
    --border-light:       #334155;
    --border-default:     #475569;
    --border-dark:        #64748B;
    --border-focus:       #3B82F6;
    --accent-primary:     #3B82F6;
    --accent-primary-hover: #60A5FA;
    --accent-primary-light: #1E3A5F;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -2px rgba(0,0,0,.3);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.4), 0 10px 10px -5px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATION UTILITY
   ═══════════════════════════════════════════════════════════ */

/* Default: elements start hidden, slide up slightly */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: none;
}

/* Stagger helpers for grid children */
.grid .animate-on-scroll:nth-child(1) { transition-delay: .05s; }
.grid .animate-on-scroll:nth-child(2) { transition-delay: .10s; }
.grid .animate-on-scroll:nth-child(3) { transition-delay: .15s; }
.grid .animate-on-scroll:nth-child(4) { transition-delay: .20s; }
.grid .animate-on-scroll:nth-child(5) { transition-delay: .25s; }
.grid .animate-on-scroll:nth-child(6) { transition-delay: .30s; }

/* Keyframe fallbacks */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; } to { opacity:1; }
}
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes pulse {
    0%,100% { opacity:1; } 50% { opacity:.5; }
}
@keyframes spin {
    to { transform:rotate(360deg); }
}

.animate-fade-in    { animation: fadeIn    .5s ease forwards; }
.animate-fade-in-up { animation: fadeInUp  .5s ease forwards; }
.animate-slide-left { animation: slideInLeft .5s ease forwards; }
.animate-pulse      { animation: pulse 2s ease infinite; }
.animate-spin       { animation: spin 1s linear infinite; }

/* Hidden utility */
.hidden { display: none !important; }