/* Design System for TestAutism.ro */
/* Central source of truth for all design tokens */

:root {
  /* Brand Colors */
  --color-raads-primary: #2196F3;    /* RAADS-R Blue */
  --color-raads-dark: #1976D2;
  --color-raads-light: #42A5F5;
  --color-raads-pale: #E3F2FD;

  --color-catq-primary: #9C27B0;     /* CAT-Q Purple */
  --color-catq-dark: #7B1FA2;
  --color-catq-light: #BA68C8;
  --color-catq-pale: #F3E5F5;

  --color-edaqa-primary: #00897B;    /* EDA-QA Teal */
  --color-edaqa-dark: #00695C;
  --color-edaqa-light: #4DB6AC;
  --color-edaqa-pale: #E0F2F1;

  /* Semantic Colors */
  --color-success: #4CAF50;
  --color-success-dark: #388E3C;
  --color-success-light: #66BB6A;
  --color-success-pale: #E8F5E9;

  --color-warning: #FF9800;
  --color-warning-dark: #F57C00;
  --color-warning-light: #FFB74D;
  --color-warning-pale: #FFF3E0;

  --color-danger: #F44336;
  --color-danger-dark: #D32F2F;
  --color-danger-light: #EF5350;
  --color-danger-pale: #FFEBEE;

  --color-info: #00BCD4;
  --color-info-dark: #0097A7;
  --color-info-light: #26C6DA;
  --color-info-pale: #E0F7FA;

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* Background Colors */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-card: var(--color-white);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Border Colors */
  --border-color-light: var(--color-gray-200);
  --border-color-medium: var(--color-gray-300);
  --border-color-dark: var(--color-gray-400);

  /* Spacing Scale (8px base) */
  --space-0: 0;
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */

  /* Container Widths */
  --container-xs: 320px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-2xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;

  /* Box Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 40px -5px rgba(0, 0, 0, 0.2), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: none;

  /* Focus Shadow */
  --shadow-focus-raads: 0 0 0 3px rgba(33, 150, 243, 0.3);
  --shadow-focus-catq: 0 0 0 3px rgba(156, 39, 176, 0.3);
  --shadow-focus-default: 0 0 0 3px rgba(66, 153, 225, 0.5);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* Z-Index Scale */
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;

  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

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

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode overrides can be added here */
  }
}

/* Utility Classes */

/* Spacing */
.p-0 { padding: var(--space-0) !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }

.m-0 { margin: var(--space-0) !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
.shadow-none { box-shadow: var(--shadow-none) !important; }

/* Border Radius */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Transitions */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-base { transition: all var(--transition-base) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }
.transition-none { transition: none !important; }

/* Background Colors */
.bg-raads { background-color: var(--color-raads-primary) !important; }
.bg-raads-light { background-color: var(--color-raads-light) !important; }
.bg-raads-pale { background-color: var(--color-raads-pale) !important; }
.bg-catq { background-color: var(--color-catq-primary) !important; }
.bg-catq-light { background-color: var(--color-catq-light) !important; }
.bg-catq-pale { background-color: var(--color-catq-pale) !important; }
.bg-edaqa { background-color: var(--color-edaqa-primary) !important; }
.bg-edaqa-light { background-color: var(--color-edaqa-light) !important; }
.bg-edaqa-pale { background-color: var(--color-edaqa-pale) !important; }

/* Container */
.container-responsive {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (min-width: 768px) {
  .container-responsive {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Card Component */
.card-modern {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: box-shadow var(--transition-base);
}

.card-modern:hover {
  box-shadow: var(--shadow-lg);
}

/* Button Base Styles */
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1.5;
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-modern:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Focus States - visible for keyboard, hidden for mouse */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-raads-r);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-default);
}

.raads-focus:focus {
  box-shadow: var(--shadow-focus-raads);
}

.catq-focus:focus {
  box-shadow: var(--shadow-focus-catq);
}

/* Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-raads-primary);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  z-index: var(--z-tooltip);
  border-radius: var(--radius-md);
}

.skip-link:focus {
  top: var(--space-sm);
  left: var(--space-sm);
}

/* Touch feedback class (used by JS instead of inline styles) */
.touch-active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .touch-active {
    transform: none;
  }
}

/* Global reduced motion - disables ALL animations/transitions site-wide */
@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;
  }

  html {
    scroll-behavior: auto !important;
  }
}