/* ScoutBadger Design Tokens
 * Foundational design system extending Radzen's CSS variables
 * Import this before other ScoutBadger stylesheets
 */

:root {
   /* ============================================
       SPACING SCALE (8px base unit)
       ============================================ */
   --sb-space-0: 0;
   --sb-space-1: 0.25rem;
   /* 4px */
   --sb-space-2: 0.5rem;
   /* 8px */
   --sb-space-3: 0.75rem;
   /* 12px */
   --sb-space-4: 1rem;
   /* 16px */
   --sb-space-5: 1.5rem;
   /* 24px */
   --sb-space-6: 2rem;
   /* 32px */
   --sb-space-8: 3rem;
   /* 48px */
   --sb-space-10: 4rem;
   /* 64px */
   --sb-space-12: 6rem;
   /* 96px */

   /* ============================================
       ELEVATION (box shadows)
       ============================================ */
   --sb-elevation-0: none;
   --sb-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
   --sb-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
   --sb-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
   --sb-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --sb-elevation-5: 0 25px 50px rgba(0, 0, 0, 0.20), 0 15px 20px rgba(0, 0, 0, 0.08);

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

   /* ============================================
       TRANSITIONS
       ============================================ */
   --sb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --sb-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --sb-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
   --sb-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

   /* ============================================
       SCOUT-THEMED COLORS
       ============================================ */
   --sb-scout-blue: #007bff;
   --sb-scout-blue-light: #4da3ff;
   --sb-scout-blue-dark: #0056b3;

   --sb-scout-green: #28a745;
   --sb-scout-green-light: #5cb85c;
   --sb-scout-green-dark: #1e7e34;

   --sb-scout-gold: #ffc107;
   --sb-scout-gold-light: #ffcd39;
   --sb-scout-gold-dark: #d39e00;

   --sb-scout-purple: #6f42c1;
   --sb-scout-purple-light: #9561e2;
   --sb-scout-purple-dark: #5a32a3;

   /* ============================================
       BADGE/AWARD LEVEL COLORS
       ============================================ */
   --sb-badge-beginner: #f1fbfc;
   --sb-badge-beginner-light: #f1fbfc;
   --sb-badge-beginner-dark: #117a8b;

   --sb-badge-intermediate: #ffc107;
   --sb-badge-intermediate-light: #ffcd39;
   --sb-badge-intermediate-dark: #d39e00;

   --sb-badge-advanced: #dc3545;
   --sb-badge-advanced-light: #e4606d;
   --sb-badge-advanced-dark: #bd2130;

   --sb-badge-expert: #6f42c1;
   --sb-badge-expert-light: #9561e2;
   --sb-badge-expert-dark: #5a32a3;

   /* ============================================
       STATUS COLORS (enhance Radzen)
       ============================================ */
   --sb-status-pending: #ffc107;
   --sb-status-pending-bg: rgba(255, 193, 7, 0.1);

   --sb-status-in-progress: #17a2b8;
   --sb-status-in-progress-bg: rgba(23, 162, 184, 0.1);

   --sb-status-approved: #28a745;
   --sb-status-approved-bg: rgba(40, 167, 69, 0.1);

   --sb-status-rejected: #dc3545;
   --sb-status-rejected-bg: rgba(220, 53, 69, 0.1);

   --sb-status-completed: #6c757d;
   --sb-status-completed-bg: rgba(108, 117, 125, 0.1);

   /* ============================================
       Z-INDEX SCALE
       ============================================ */
   --sb-z-base: 0;
   --sb-z-dropdown: 1000;
   --sb-z-sticky: 1020;
   --sb-z-fixed: 1030;
   --sb-z-modal-backdrop: 1040;
   --sb-z-modal: 1050;
   --sb-z-popover: 1060;
   --sb-z-tooltip: 1070;

   /* ============================================
       TYPOGRAPHY SCALE (extends Radzen)
       ============================================ */
   --sb-font-size-xs: 0.75rem;
   /* 12px */
   --sb-font-size-sm: 0.875rem;
   /* 14px */
   --sb-font-size-base: 1rem;
   /* 16px */
   --sb-font-size-lg: 1.125rem;
   /* 18px */
   --sb-font-size-xl: 1.25rem;
   /* 20px */
   --sb-font-size-2xl: 1.5rem;
   /* 24px */
   --sb-font-size-3xl: 1.875rem;
   /* 30px */
   --sb-font-size-4xl: 2.25rem;
   /* 36px */

   --sb-font-weight-light: 300;
   --sb-font-weight-normal: 400;
   --sb-font-weight-medium: 500;
   --sb-font-weight-semibold: 600;
   --sb-font-weight-bold: 700;

   --sb-line-height-tight: 1.25;
   --sb-line-height-normal: 1.5;
   --sb-line-height-relaxed: 1.75;

   /* ============================================
       LAYOUT WIDTHS
       ============================================ */
   --sb-container-sm: 640px;
   --sb-container-md: 768px;
   --sb-container-lg: 1024px;
   --sb-container-xl: 1280px;
   --sb-container-2xl: 1536px;
}

/* ============================================
   DARK MODE OVERRIDES (if Radzen theme supports)
   ============================================ */
@media (prefers-color-scheme: dark) {
   :root {
      /* Adjust elevations for dark mode */
      --sb-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.12);
      --sb-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.12);
      --sb-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.20), 0 4px 6px rgba(0, 0, 0, 0.10);
      --sb-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.30), 0 10px 10px rgba(0, 0, 0, 0.08);
   }
}