/**
 * SafeDrop Design Tokens & Utility Base
 * Brand Identity: Red (#D71920) + White (#FFFFFF)
 */

:root {
  /* Brand Red Palette */
  --sd-primary: #D71920;
  --sd-primary-dark: #A50F15;
  --sd-primary-light: #FFF1F2;
  --sd-primary-50: #FFF1F2;
  --sd-primary-100: #FFE4E6;
  --sd-primary-200: #FECDD3;
  --sd-primary-500: #D71920;
  --sd-primary-600: #C1141A;
  --sd-primary-700: #A50F15;
  --sd-primary-800: #881318;

  /* Neutrals & Surfaces */
  --sd-surface: #FFFFFF;
  --sd-bg: #F8FAFC;
  --sd-text-main: #172033;
  --sd-text-muted: #64748B;
  --sd-border: #E2E8F0;

  /* State Colors */
  --sd-success: #16A34A;
  --sd-warning: #F59E0B;
  --sd-danger: #DC2626;

  /* SafeDrop Venue Locker Status Tokens */
  --sd-locker-available: #16A34A;
  --sd-locker-held: #D97706;
  --sd-locker-occupied: #DC2626;
  --sd-locker-maintenance: #EA580C;
  --sd-locker-disabled: #94A3B8;

  /* Spacing Scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px) */
  --sd-space-1: 0.25rem;  /* 4px */
  --sd-space-2: 0.5rem;   /* 8px */
  --sd-space-3: 0.75rem;  /* 12px */
  --sd-space-4: 1rem;     /* 16px */
  --sd-space-5: 1.25rem;  /* 20px */
  --sd-space-6: 1.5rem;   /* 24px */
  --sd-space-8: 2rem;     /* 32px */
  --sd-space-10: 2.5rem;  /* 40px */
  --sd-space-12: 3rem;    /* 48px */
  --sd-space-16: 4rem;    /* 64px */
  --sd-space-20: 5rem;    /* 80px */
  --sd-space-24: 6rem;    /* 96px */

  /* Border Radius */
  --sd-radius-btn: 10px;  /* 8-10px */
  --sd-radius-card: 16px; /* 12-16px */
  --sd-radius-badge: 6px;

  /* Shadows */
  --sd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sd-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --sd-shadow-hover: 0 10px 25px -5px rgba(215, 25, 32, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Custom Scrollbar for clean aesthetics */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Base Body Styles */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--sd-text-main);
  background-color: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus Ring Utility */
.sd-focus-ring:focus-visible {
  outline: 2px solid var(--sd-primary);
  outline-offset: 2px;
}

/* Respect user's motion preferences */
@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;
  }
}

/* Ensure fixed modal backdrops and dialog overlays are never offset by parent space-y utilities */
.fixed.inset-0,
[class*="fixed"][class*="inset-0"],
[class*="space-y-"] > [class*="fixed"],
[class*="space-y-"] > .fixed,
div[class*="space-y-"] > div.fixed {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: 0 !important;
}