/* ============================================================================
   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;
    --ring-accent:          0 0 0 3px rgba(37,99,235,.18);

    /* ── 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 — sleek premium palette ─────────────────── */
:root[data-theme="dark"] {
    /* Deep near-black navy with subtly lifted surfaces for depth */
    --bg-primary:         #0A0E17;
    --bg-secondary:       #0F1421;
    --bg-tertiary:        #1B2335;
    --bg-card:            #121929;
    --bg-sidebar:         #080B12;
    --bg-overlay:         rgba(2,6,15,.72);

    --text-primary:       #F4F7FB;
    --text-secondary:     #C4CEDC;
    --text-tertiary:      #97A4B8;
    --text-muted:         #6B7A91;
    --text-inverse:       #0A0E17;

    /* Hairline borders that read as separators, not boxes */
    --border-light:       #1C2435;
    --border-default:     #283146;
    --border-dark:        #3A465E;
    --border-focus:       #4F8DF7;

    /* Brighter, cleaner accent that pops on the dark ground */
    --accent-primary:       #4F8DF7;
    --accent-primary-hover: #6EA3FF;
    --accent-primary-light: rgba(79,141,247,.16);
    --accent-primary-dark:  #2B6CE0;
    --accent-secondary:     #A78BFA;

    --gradient-primary: linear-gradient(135deg,#4F8DF7 0%,#9B7BF0 100%);
    --gradient-dark:    linear-gradient(135deg,#1B2335 0%,#0F1421 100%);

    /* Status tints reworked for dark backgrounds (translucent fills) */
    --success-light: rgba(16,185,129,.15);  --success: #10B981; --success-dark: #6EE7B7;
    --warning-light: rgba(245,158,11,.15);  --warning: #F59E0B; --warning-dark: #FCD34D;
    --error-light:   rgba(239,68,68,.15);    --error:   #F05252; --error-dark:   #FCA5A5;
    --info-light:    rgba(56,189,248,.15);   --info:    #38BDF8; --info-dark:    #7DD3FC;

    /* Deeper shadows + a faint accent glow for elevated surfaces */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 16px -4px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 32px -8px rgba(0,0,0,.65), 0 6px 12px -4px rgba(0,0,0,.5);
    --shadow-xl: 0 28px 56px -12px rgba(0,0,0,.7), 0 10px 20px -6px rgba(0,0,0,.55);
    --shadow-2xl: 0 40px 80px -16px rgba(0,0,0,.78);
    --ring-accent: 0 0 0 3px rgba(79,141,247,.22);
}

/* ═══════════════════════════════════════════════════════════
   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; }