/* Enduvo Design System Tokens - Generated from JSON tokens */
/* Update the JSON files in /tokens/ directory and regenerate this file */

:root {
  /* ==================== PRIMARY COLORS ==================== */

  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-clay: #F7F3EE;
  --color-atmosphere: #EDF2F4;

  /* ==================== ACCENT COLORS ==================== */

  --color-blue: #3399FF;
  --color-cyan: #2CB8F9;
  --color-teal: #00C7B6;
  --color-green: #39D56A;
  --color-yellow: #FFC300;
  --color-orange: #FF9500;
  --color-red: #FF4C30;
  --color-pink: #FF3366;
  --color-violet: #C066ED;
  --color-purple: #6F6DF2;

  /* ==================== NEUTRAL COLORS ==================== */

  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-neutral-1000: #000000;

  /* ==================== SEMANTIC COLORS ==================== */

  --color-success: #39D56A;
  --color-warning: #FFC300;
  --color-error: #FF4C30;
  --color-info: #3399FF;

  /* ==================== BACKGROUND COLORS ==================== */

  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F7F3EE;
  --color-background-tertiary: #EDF2F4;
  --color-background-dark: #000000;
  --color-background-clay: #F7F3EE;
  --color-background-atmosphere: #EDF2F4;

  /* ==================== TEXT COLORS ==================== */

  --color-text-primary: #000000;
  --color-text-secondary: #525252;
  --color-text-tertiary: #737373;
  --color-text-disabled: #A3A3A3;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #3399FF;
  --color-text-link-hover: #2CB8F9;

  /* ==================== BORDER COLORS ==================== */

  --color-border-light: #E5E5E5;
  --color-border-default: #D4D4D4;
  --color-border-dark: #737373;

  /* ==================== GLASS EFFECTS ==================== */

  /* Light Glass Effects */
  --glass-light-thick: rgba(255, 255, 255, 0.5);
  --glass-light-thick-blur: blur(20px);
  --glass-light-thick-border: 1px solid rgba(255, 255, 255, 0.3);

  --glass-light-regular: rgba(255, 255, 255, 0.35);
  --glass-light-regular-blur: blur(16px);
  --glass-light-regular-border: 1px solid rgba(255, 255, 255, 0.2);

  --glass-light-thin: rgba(255, 255, 255, 0.2);
  --glass-light-thin-blur: blur(12px);
  --glass-light-thin-border: 1px solid rgba(255, 255, 255, 0.1);

  /* Dark Glass Effects */
  --glass-dark-thick: rgba(30, 30, 30, 0.35);
  --glass-dark-thick-blur: blur(20px);
  --glass-dark-thick-border: 1px solid rgba(255, 255, 255, 0.1);

  --glass-dark-regular: rgba(30, 30, 30, 0.18);
  --glass-dark-regular-blur: blur(16px);
  --glass-dark-regular-border: 1px solid rgba(255, 255, 255, 0.08);

  --glass-dark-thin: rgba(30, 30, 30, 0.05);
  --glass-dark-thin-blur: blur(12px);
  --glass-dark-thin-border: 1px solid rgba(255, 255, 255, 0.05);

  /* ==================== GRADIENTS ==================== */

  --gradient-primary: linear-gradient(135deg, #F7F3EE 0%, #EDF2F4 100%);
  --gradient-blue-teal: linear-gradient(90deg, #3399FF 0%, #00C7B6 100%);
  --gradient-orange-yellow: linear-gradient(90deg, #FF9500 0%, #FFC300 100%);
  --gradient-pink-violet: linear-gradient(90deg, #FF3366 0%, #C066ED 100%);
  --gradient-purple-blue: linear-gradient(90deg, #6F6DF2 0%, #3399FF 100%);
  --gradient-radial-glow: radial-gradient(circle, rgba(51, 153, 255, 0.3) 0%, transparent 70%);

  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-family-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-family-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==================== SPACING ==================== */

  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;

  /* ==================== SHADOWS ==================== */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Colored Shadows */
  --shadow-blue: 0 10px 25px -5px rgb(51 153 255 / 0.25), 0 4px 10px -6px rgb(51 153 255 / 0.15);
  --shadow-green: 0 10px 25px -5px rgb(57 213 106 / 0.25), 0 4px 10px -6px rgb(57 213 106 / 0.15);
  --shadow-red: 0 10px 25px -5px rgb(255 76 48 / 0.25), 0 4px 10px -6px rgb(255 76 48 / 0.15);

  /* Focus Shadows */
  --shadow-focus-default: 0 0 0 3px rgb(51 153 255 / 0.5);
  --shadow-focus-error: 0 0 0 3px rgb(255 76 48 / 0.5);
  --shadow-focus-success: 0 0 0 3px rgb(57 213 106 / 0.5);

  /* ==================== BORDER RADIUS ==================== */

  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ==================== BLUR VALUES ==================== */

  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 20px;
  --blur-xl: 40px;

  /* ==================== ANIMATIONS ==================== */

  /* Durations */
  --animation-duration-instant: 75ms;
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;
  --animation-duration-slower: 700ms;
  --animation-duration-slowest: 1000ms;

  /* Easings */
  --animation-easing-linear: linear;
  --animation-easing-ease: ease;
  --animation-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --animation-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --animation-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Transitions */
  --transition-default: all var(--animation-duration-normal) var(--animation-easing-ease-out);
  --transition-fast: all var(--animation-duration-fast) var(--animation-easing-ease-out);
  --transition-slow: all var(--animation-duration-slow) var(--animation-easing-ease-in-out);
  --transition-colors: background-color var(--animation-duration-normal) var(--animation-easing-ease-out),
                       border-color var(--animation-duration-normal) var(--animation-easing-ease-out),
                       color var(--animation-duration-normal) var(--animation-easing-ease-out),
                       fill var(--animation-duration-normal) var(--animation-easing-ease-out),
                       stroke var(--animation-duration-normal) var(--animation-easing-ease-out);
  --transition-opacity: opacity var(--animation-duration-fast) var(--animation-easing-ease-out);
  --transition-transform: transform var(--animation-duration-normal) var(--animation-easing-ease-out);
  --transition-shadow: box-shadow var(--animation-duration-normal) var(--animation-easing-ease-out);
}

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

/* Glass Effect Classes */
.glass-light-thick {
  background: var(--glass-light-thick);
  backdrop-filter: var(--glass-light-thick-blur);
  -webkit-backdrop-filter: var(--glass-light-thick-blur);
  border: var(--glass-light-thick-border);
}

.glass-light-regular {
  background: var(--glass-light-regular);
  backdrop-filter: var(--glass-light-regular-blur);
  -webkit-backdrop-filter: var(--glass-light-regular-blur);
  border: var(--glass-light-regular-border);
}

.glass-light-thin {
  background: var(--glass-light-thin);
  backdrop-filter: var(--glass-light-thin-blur);
  -webkit-backdrop-filter: var(--glass-light-thin-blur);
  border: var(--glass-light-thin-border);
}

.glass-dark-thick {
  background: var(--glass-dark-thick);
  backdrop-filter: var(--glass-dark-thick-blur);
  -webkit-backdrop-filter: var(--glass-dark-thick-blur);
  border: var(--glass-dark-thick-border);
}

.glass-dark-regular {
  background: var(--glass-dark-regular);
  backdrop-filter: var(--glass-dark-regular-blur);
  -webkit-backdrop-filter: var(--glass-dark-regular-blur);
  border: var(--glass-dark-regular-border);
}

.glass-dark-thin {
  background: var(--glass-dark-thin);
  backdrop-filter: var(--glass-dark-thin-blur);
  -webkit-backdrop-filter: var(--glass-dark-thin-blur);
  border: var(--glass-dark-thin-border);
}

/* Gradient Classes */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-blue-teal {
  background: var(--gradient-blue-teal);
}

.gradient-orange-yellow {
  background: var(--gradient-orange-yellow);
}

.gradient-pink-violet {
  background: var(--gradient-pink-violet);
}

.gradient-purple-blue {
  background: var(--gradient-purple-blue);
}

/* ==================== KEYFRAME ANIMATIONS ==================== */

@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 pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
}

/* Animation Utility Classes */
.animate-fadeIn { animation: fadeIn var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-fadeOut { animation: fadeOut var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-slideInUp { animation: slideInUp var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-slideInDown { animation: slideInDown var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-slideInLeft { animation: slideInLeft var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-slideInRight { animation: slideInRight var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-scaleIn { animation: scaleIn var(--animation-duration-normal) var(--animation-easing-ease-out); }
.animate-pulse { animation: pulse 2s var(--animation-easing-ease-in-out) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }