/*
 * VM Design Tokens (subset) – derived from Portal_Login/app/static/css/design-tokens.css
 * Loaded first to provide CSS custom properties for StaffProd header integration.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

:root {
  --vm-color-brand-red-500: #C8102E;
  --vm-color-brand-red-600: #A00E25;
  --vm-color-brand-red-800: #5C0714;
  --vm-color-neutral-gray-50: #F9F9F9;
  --vm-color-neutral-gray-100: #F3F4F6;
  --vm-color-neutral-gray-200: #E5E7EB;
  --vm-color-neutral-gray-300: #D1D5DB;
  --vm-color-neutral-gray-900: #111827;
  --vm-white: #FFFFFF;
  --vm-black: #1A1A1A;

  --vm-surface-page-bg: var(--vm-color-neutral-gray-50);
  --vm-surface-card-bg: var(--vm-color-neutral-gray-100);
  --vm-surface-card-border: var(--vm-color-neutral-gray-200);
  --vm-surface-muted-bg: var(--vm-color-neutral-gray-50);

  --vm-header-text-color: #FFFFFF;
  --vm-header-subtitle-color: rgba(255, 255, 255, 0.95);

  --vm-spacing-xs: 0.25rem;
  --vm-spacing-sm: 0.5rem;
  --vm-spacing-md: 1rem;
  --vm-spacing-lg: 1.5rem;
  --vm-spacing-xl: 2rem;

  --vm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vm-font-display: 'Bebas Neue', 'Arial Black', Arial, sans-serif;

  --vm-text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --vm-text-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.3);
  --vm-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode palette – align with Portal dark blue */
[data-theme="dark"] {
  --vm-surface-page-bg: #111c34;
  --vm-surface-card-bg: #111c34;
  --vm-surface-card-border: #1f2a44;
  --vm-surface-muted-bg: #0b1628;
  --vm-color-neutral-gray-900: #F9FAFB;
}

body {
  font-family: var(--vm-font-body);
  background-color: var(--vm-surface-page-bg);
  color: var(--vm-color-neutral-gray-900);
  margin: 0;
}

.btn,
button {
  font-family: var(--vm-font-body);
}