/* MoonUI Design Tokens - Namespaced to prevent conflicts */

.moonui-root {
  /* === COLOR SYSTEM === */
  
  /* Primary Colors */
  --moonui-primary-50: 240 249 255;
  --primary-100: 224 242 254;
  --primary-200: 186 230 253;
  --primary-300: 125 211 252;
  --primary-400: 56 189 248;
  --primary-500: 14 165 233;
  --primary-600: 2 132 199;
  --primary-700: 3 105 161;
  --primary-800: 7 89 133;
  --primary-900: 12 74 110;
  --primary-950: 8 47 73;
  
  /* Secondary Colors */
  --secondary-50: 248 250 252;
  --secondary-100: 241 245 249;
  --secondary-200: 226 232 240;
  --secondary-300: 203 213 225;
  --secondary-400: 148 163 184;
  --secondary-500: 100 116 139;
  --secondary-600: 71 85 105;
  --secondary-700: 51 65 85;
  --secondary-800: 30 41 59;
  --secondary-900: 15 23 42;
  --secondary-950: 2 6 23;
  
  /* Semantic Colors */
  --success-50: 240 253 244;
  --success-100: 220 252 231;
  --success-200: 187 247 208;
  --success-300: 134 239 172;
  --success-400: 74 222 128;
  --success-500: 34 197 94;
  --success-600: 22 163 74;
  --success-700: 21 128 61;
  --success-800: 22 101 52;
  --success-900: 20 83 45;
  --success-950: 5 46 22;
  
  --warning-50: 254 252 232;
  --warning-100: 254 249 195;
  --warning-200: 254 240 138;
  --warning-300: 253 224 71;
  --warning-400: 250 204 21;
  --warning-500: 234 179 8;
  --warning-600: 202 138 4;
  --warning-700: 161 98 7;
  --warning-800: 133 77 14;
  --warning-900: 113 63 18;
  --warning-950: 66 32 6;
  
  --error-50: 254 242 242;
  --error-100: 254 226 226;
  --error-200: 254 202 202;
  --error-300: 252 165 165;
  --error-400: 248 113 113;
  --error-500: 239 68 68;
  --error-600: 220 38 38;
  --error-700: 185 28 28;
  --error-800: 153 27 27;
  --error-900: 127 29 29;
  --error-950: 69 10 10;
  
  /* Theme Colors */
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 100% 50%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 215 20.2% 65.1%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  --text-9xl: 8rem;        /* 128px */
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* === SPACING SYSTEM === */
  
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;   /* 2px */
  --spacing-1: 0.25rem;      /* 4px */
  --spacing-1-5: 0.375rem;   /* 6px */
  --spacing-2: 0.5rem;       /* 8px */
  --spacing-2-5: 0.625rem;   /* 10px */
  --spacing-3: 0.75rem;      /* 12px */
  --spacing-3-5: 0.875rem;   /* 14px */
  --spacing-4: 1rem;         /* 16px */
  --spacing-5: 1.25rem;      /* 20px */
  --spacing-6: 1.5rem;       /* 24px */
  --spacing-7: 1.75rem;      /* 28px */
  --spacing-8: 2rem;         /* 32px */
  --spacing-9: 2.25rem;      /* 36px */
  --spacing-10: 2.5rem;      /* 40px */
  --spacing-11: 2.75rem;     /* 44px */
  --spacing-12: 3rem;        /* 48px */
  --spacing-14: 3.5rem;      /* 56px */
  --spacing-16: 4rem;        /* 64px */
  --spacing-20: 5rem;        /* 80px */
  --spacing-24: 6rem;        /* 96px */
  --spacing-28: 7rem;        /* 112px */
  --spacing-32: 8rem;        /* 128px */
  --spacing-36: 9rem;        /* 144px */
  --spacing-40: 10rem;       /* 160px */
  --spacing-44: 11rem;       /* 176px */
  --spacing-48: 12rem;       /* 192px */
  --spacing-52: 13rem;       /* 208px */
  --spacing-56: 14rem;       /* 224px */
  --spacing-60: 15rem;       /* 240px */
  --spacing-64: 16rem;       /* 256px */
  --spacing-72: 18rem;       /* 288px */
  --spacing-80: 20rem;       /* 320px */
  --spacing-96: 24rem;       /* 384px */
  
  /* === BORDER RADIUS === */
  
  --radius-none: 0;
  --radius-sm: 0.125rem;     /* 2px */
  --radius-base: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;     /* 6px */
  --radius-lg: 0.5rem;       /* 8px */
  --radius-xl: 0.75rem;      /* 12px */
  --radius-2xl: 1rem;        /* 16px */
  --radius-3xl: 1.5rem;      /* 24px */
  --radius-full: 9999px;
  
  /* === SHADOWS & ELEVATION === */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 #0000;
  
  /* Elevation System */
  --elevation-0: var(--shadow-none);
  --elevation-1: var(--shadow-sm);
  --elevation-2: var(--shadow-base);
  --elevation-3: var(--shadow-md);
  --elevation-4: var(--shadow-lg);
  --elevation-5: var(--shadow-xl);
  --elevation-6: var(--shadow-2xl);
  
  /* === ANIMATION SYSTEM === */
  
  /* Duration Scale */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Animation Presets */
  --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);
  --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);
  --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);
  --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);
  --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);
  --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);
  --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);
  --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);
  --animate-bounce: bounce var(--duration-500) var(--ease-bounce);
  --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;
  --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;
  
  /* === BREAKPOINTS === */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Container Sizes */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* === Z-INDEX SCALE === */
  
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  /* Semantic Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* === COMPONENT-SPECIFIC TOKENS === */
  
  /* Button Tokens */
  --button-height-sm: 2rem;      /* 32px */
  --button-height-md: 2.5rem;    /* 40px */
  --button-height-lg: 3rem;      /* 48px */
  --button-height-xl: 3.5rem;    /* 56px */
  
  --button-padding-sm: 0.5rem 0.75rem;
  --button-padding-md: 0.625rem 1rem;
  --button-padding-lg: 0.75rem 1.25rem;
  --button-padding-xl: 1rem 1.5rem;
  
  --button-font-size-sm: var(--text-sm);
  --button-font-size-md: var(--text-base);
  --button-font-size-lg: var(--text-lg);
  --button-font-size-xl: var(--text-xl);
  
  /* Input Tokens */
  --input-height-sm: 2rem;       /* 32px */
  --input-height-md: 2.5rem;     /* 40px */
  --input-height-lg: 3rem;       /* 48px */
  --input-height-xl: 3.5rem;     /* 56px */
  
  --input-padding-sm: 0.5rem 0.75rem;
  --input-padding-md: 0.625rem 1rem;
  --input-padding-lg: 0.75rem 1.25rem;
  --input-padding-xl: 1rem 1.5rem;
  
  --input-border-width: 1px;
  --input-border-radius: var(--radius-md);
  --input-focus-ring-width: 2px;
  --input-focus-ring-offset: 2px;
  
  /* Card Tokens */
  --card-padding-sm: 1rem;
  --card-padding-md: 1.5rem;
  --card-padding-lg: 2rem;
  --card-padding-xl: 2.5rem;
  
  --card-border-radius: var(--radius-lg);
  --card-border-width: 1px;
  --card-shadow: var(--elevation-1);
  --card-hover-shadow: var(--elevation-2);
}

/* === DARK MODE === */

.dark {
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
  --card: 224 71% 4%;
  --card-foreground: 213 31% 91%;
  --popover: 224 71% 4%;
  --popover-foreground: 213 31% 91%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 1.2%;
  --secondary: 222.2 84% 4.9%;
  --secondary-foreground: 210 40% 98%;
  --muted: 223 47% 11%;
  --muted-foreground: 215.4 16.3% 56.9%;
  --accent: 216 34% 17%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
  --border: 216 34% 17%;
  --input: 216 34% 17%;
  --ring: 216 34% 17%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

/* === KEYFRAMES === */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.95); opacity: 0; }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === UTILITY CLASSES === */

.animate-fade-in { animation: var(--animate-fade-in); }
.animate-fade-out { animation: var(--animate-fade-out); }
.animate-slide-in-up { animation: var(--animate-slide-in-up); }
.animate-slide-in-down { animation: var(--animate-slide-in-down); }
.animate-slide-in-left { animation: var(--animate-slide-in-left); }
.animate-slide-in-right { animation: var(--animate-slide-in-right); }
.animate-scale-in { animation: var(--animate-scale-in); }
.animate-scale-out { animation: var(--animate-scale-out); }
.animate-bounce { animation: var(--animate-bounce); }
.animate-pulse { animation: var(--animate-pulse); }
.animate-spin { animation: var(--animate-spin); }

/* === RESPONSIVE UTILITIES === */

@media (max-width: 639px) {
  .container { max-width: 100%; }
}

@media (min-width: 640px) {
  .container { max-width: var(--container-sm); }
}

@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}

@media (min-width: 1024px) {
  .container { max-width: var(--container-lg); }
}

@media (min-width: 1280px) {
  .container { max-width: var(--container-xl); }
}

@media (min-width: 1536px) {
  .container { max-width: var(--container-2xl); }
}