@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Primary Colors */
  --pri-50:#EEF2FF;
  --pri-100:#E0E7FF;
  --pri-200:#C7D2FE;
  --pri-300:#A5B4FC;
  --pri-400:#818CF8;
  --pri-500:#6366F1;
  --pri-600:#4F46E5;
  --pri-700:#4338CA;
  --pri-800:#3730A3;
  --pri-900:#312E81;
  
  /* Accent Colors */
  --acc-50:#ECFDF5;
  --acc-100:#D1FAE5;
  --acc-200:#A7F3D0;
  --acc-300:#6EE7B7;
  --acc-400:#34D399;
  --acc-500:#10B981;
  --acc-600:#059669;
  --acc-700:#047857;
  --acc-800:#065F46;
  --acc-900:#064E3B;
  
  /* Danger Colors */
  --dan-50:#FEF2F2;
  --dan-100:#FEE2E2;
  --dan-200:#FECACA;
  --dan-300:#FCA5A5;
  --dan-400:#F87171;
  --dan-500:#EF4444;
  --dan-600:#DC2626;
  --dan-700:#B91C1C;
  --dan-800:#991B1B;
  --dan-900:#7F1D1D;
  
  /* Warning Colors */
  --warn-50:#FFFBEB;
  --warn-100:#FEF3C7;
  --warn-200:#FDE68A;
  --warn-300:#FCD34D;
  --warn-400:#FBBF24;
  --warn-500:#F59E0B;
  --warn-600:#D97706;
  --warn-700:#B45309;
  --warn-800:#92400E;
  --warn-900:#78350F;
  
  /* Neutral Colors */
  --slate-50:#F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-400:#94A3B8;
  --slate-500:#64748B;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1E293B;
  --slate-900:#0F172A;
  
  /* Semantic Colors */
  --pri:var(--pri-600);
  --pril:var(--pri-400);
  --acc:var(--acc-500);
  --dan:var(--dan-500);
  --warn:var(--warn-500);
  --bg:var(--slate-50);
  --bgd:var(--slate-900);
  --card:#FFFFFF;
  --tx:var(--slate-900);
  --tx2:var(--slate-600);
  --tx3:var(--slate-500);
  --brd:var(--slate-200);
  
  /* Spacing Scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  
  /* Border Radius */
  --r:12px;
  --rx:20px;
  --r-sm:8px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:9999px;
  
  /* Shadows */
  --sh:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --sh-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06);
  --sh-lg:0 10px 15px rgba(0,0,0,0.08),0 4px 6px rgba(0,0,0,0.05);
  --sh-xl:0 20px 25px rgba(0,0,0,0.1),0 10px 10px rgba(0,0,0,0.04);
  --sh-2xl:0 25px 50px rgba(0,0,0,0.15),0 12px 24px rgba(0,0,0,0.1);
  --shl:0 8px 30px rgba(0,0,0,0.12);
  --sh-pri:0 4px 14px rgba(79,70,229,0.3);
  --sh-pri-lg:0 8px 24px rgba(79,70,229,0.4);
  --sh-acc:0 4px 14px rgba(16,185,129,0.3);
  --sh-acc-lg:0 8px 24px rgba(16,185,129,0.4);
  --sh-dan:0 4px 14px rgba(239,68,68,0.3);
  --sh-inner:inset 0 2px 4px rgba(0,0,0,0.06);
  
  /* Transitions */
  --trans-fast:0.15s ease;
  --trans-base:0.2s ease;
  --trans-slow:0.3s ease;
  --trans-smooth:0.4s cubic-bezier(0.4,0,0.2,1);
  --trans-bounce:0.5s cubic-bezier(0.68,-0.55,0.265,1.55);
  --trans-elastic:0.6s cubic-bezier(0.68,-0.6,0.32,1.6);
  
  /* Z-index Scale */
  --z-dropdown:100;
  --z-sticky:200;
  --z-fixed:300;
  --z-modal-backdrop:400;
  --z-modal:500;
  --z-popover:600;
  --z-tooltip:700;
  --z-toast:9999;
  
  /* Typography Scale */
  --text-xs:12px;
  --text-sm:13px;
  --text-base:14px;
  --text-lg:16px;
  --text-xl:18px;
  --text-2xl:20px;
  --text-3xl:24px;
  --text-4xl:30px;
  --text-5xl:36px;
  
  /* Font Weights */
  --font-light:300;
  --font-normal:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-extrabold:800;
  --font-black:900;
  
  /* Line Heights */
  --leading-tight:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.75;
}

body{
  font-family:Inter,sans-serif;
  background:var(--bg);
  color:var(--tx);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:'cv02','cv03','cv04','cv11';
}

/* Icon System */
.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  font-size:16px;
  flex-shrink:0;
}
.icon-sm{width:16px;height:16px;font-size:14px}
.icon-lg{width:24px;height:24px;font-size:20px}
.icon-xl{width:32px;height:32px;font-size:24px}

/* Focus Styles */
:focus-visible{
  outline:3px solid var(--pri);
  outline-offset:2px;
}

/* Skip Link for Accessibility */
.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--pri);
  color:#fff;
  padding:8px 16px;
  z-index:10000;
  transition:var(--trans-base);
  text-decoration:none;
  font-weight:var(--font-semibold);
  border-radius:0 0 var(--r) 0
}
.skip-link:focus{
  top:0
}

/* Selection */
::selection{
  background:var(--pri-200);
  color:var(--pri-900);
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important
  }
}

/* High Contrast Mode */
@media(prefers-contrast:high){
  :root{
    --brd:var(--slate-600)
  }
  .card{
    border-width:2px
  }
  .fi{
    border-width:2px
  }
}

/* Page Transitions */
.page-section{
  opacity:0;
  transform:translateY(20px);
  animation:fadeInUp var(--trans-smooth) forwards
}
@keyframes fadeInUp{
  to{
    opacity:1;
    transform:translateY(0)
  }
}

/* Staggered Animation for Lists */
.stagger-item{
  opacity:0;
  animation:fadeIn var(--trans-smooth) forwards
}
.stagger-item:nth-child(1){animation-delay:0.05s}
.stagger-item:nth-child(2){animation-delay:0.1s}
.stagger-item:nth-child(3){animation-delay:0.15s}
.stagger-item:nth-child(4){animation-delay:0.2s}
.stagger-item:nth-child(5){animation-delay:0.25s}
.stagger-item:nth-child(6){animation-delay:0.3s}
@keyframes fadeIn{
  to{
    opacity:1
  }
}

/* Pulse Animation for Live Indicators */
.pulse{
  animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite
}
@keyframes pulse{
  0%,100%{
    opacity:1
  }
  50%{
    opacity:0.5
  }
}

/* Shimmer Effect for Loading */
.shimmer{
  position:relative;
  overflow:hidden
}
.shimmer::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:shimmer 1.5s infinite
}
@keyframes shimmer{
  to{
    left:100%
  }
}

/* Scrollbar */
::-webkit-scrollbar{
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track{
  background:var(--slate-100);
}
::-webkit-scrollbar-thumb{
  background:var(--slate-300);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--slate-400);
}

/* Typography Classes */
h1,h2,h3,h4,h5,h6{
  font-weight:var(--font-bold);
  line-height:var(--leading-tight);
  color:var(--tx);
}
h1{font-size:var(--text-4xl);letter-spacing:-0.5px}
h2{font-size:var(--text-3xl);letter-spacing:-0.3px}
h3{font-size:var(--text-2xl);letter-spacing:-0.2px}
h4{font-size:var(--text-xl);letter-spacing:-0.1px}
h5{font-size:var(--text-lg)}
h6{font-size:var(--text-base)}

.text-xs{font-size:var(--text-xs)}
.text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)}
.text-lg{font-size:var(--text-lg)}
.text-xl{font-size:var(--text-xl)}
.text-2xl{font-size:var(--text-2xl)}

.font-normal{font-weight:var(--font-normal)}
.font-medium{font-weight:var(--font-medium)}
.font-semibold{font-weight:var(--font-semibold)}
.font-bold{font-weight:var(--font-bold)}
.font-extrabold{font-weight:var(--font-extrabold)}
.font-black{font-weight:var(--font-black)}

.text-primary{color:var(--pri)}
.text-accent{color:var(--acc)}
.text-danger{color:var(--dan)}
.text-warning{color:var(--warn)}
.text-muted{color:var(--tx2)}
.text-light{color:var(--tx3)}

/* Utility Classes */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}
.p-1{padding:var(--space-1)}
.p-2{padding:var(--space-2)}
.p-3{padding:var(--space-3)}
.p-4{padding:var(--space-4)}
.p-6{padding:var(--space-6)}
.p-8{padding:var(--space-8)}
.m-1{margin:var(--space-1)}
.m-2{margin:var(--space-2)}
.m-3{margin:var(--space-3)}
.m-4{margin:var(--space-4)}
.m-6{margin:var(--space-6)}
.m-8{margin:var(--space-8)}
.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mb-1{margin-bottom:var(--space-1)}
.mb-2{margin-bottom:var(--space-2)}
.mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)}
.w-full{width:100%}
.h-full{height:100%}
.rounded{border-radius:var(--r)}
.rounded-lg{border-radius:var(--r-lg)}
.rounded-xl{border-radius:var(--r-xl)}
.rounded-full{border-radius:var(--r-full)}
.shadow{box-shadow:var(--sh)}
.shadow-md{box-shadow:var(--sh-md)}
.shadow-lg{box-shadow:var(--sh-lg)}
.shadow-xl{box-shadow:var(--sh-xl)}
.cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}
.opacity-50{opacity:0.5}
.opacity-75{opacity:0.75}
.transition{transition:var(--trans-base)}
.transition-fast{transition:var(--trans-fast)}
.transition-smooth{transition:var(--trans-smooth)}
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.bottom-0{bottom:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.uppercase{text-transform:uppercase}
.capitalize{text-transform:capitalize}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.break-words{word-wrap:break-word}
.break-all{word-break:break-all}