/* Path: Frontend/src/styles/themes/_tokens.scss */

:root {
  --gray-0: hsl(210 20% 99%);
  --gray-50: hsl(220 20% 97%);
  --gray-100: hsl(220 16% 93%);
  --gray-200: hsl(220 13% 87%);
  --gray-300: hsl(220 11% 75%);
  --gray-400: hsl(220 9% 58%);
  --gray-500: hsl(220 10% 45%);
  --gray-600: hsl(220 14% 34%);
  --gray-700: hsl(220 18% 24%);
  --gray-800: hsl(220 22% 16%);
  --gray-900: hsl(220 28% 10%);

  --blue-400: hsl(218 88% 61%);
  --blue-500: hsl(221 83% 53%);
  --blue-600: hsl(224 76% 48%);

  --green-500: hsl(154 60% 40%);
  --red-500: hsl(0 72% 54%);
  --amber-500: hsl(36 100% 50%);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 32px hsl(220 30% 10% / 0.08);
  --shadow-strong: 0 20px 48px hsl(220 30% 10% / 0.16);

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  --motion-duration-fast: 140ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}