/**
 * Design Tokens
 *
 * Central token definitions for colors, spacing, typography, and other design primitives.
 * All custom properties are defined here to ensure consistency across the application.
 */

:root {
  /* ===========================
     Brand Colors
     =========================== */

  /* Primary brand palette from logo */
  --mc-navy: #0A1628;
  --mc-blue: #2563EB;
  --mc-sky: #38BDF8;
  --mc-silver: #E5E7EB;
  --mc-charcoal: #374151;
  --mc-magenta: #E91E8C;
  --mc-amber: #FF9500;

  /* ===========================
     Semantic Colors
     =========================== */

  /* Primary actions and interactive elements - using brighter sky blue */
  --color-primary: var(--mc-sky);
  --color-primary-hover: #0EA5E9;
  --color-primary-active: #0284C7;

  /* Success states */
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-active: #065F46;

  /* Warning states */
  --color-warning: var(--mc-amber);
  --color-warning-hover: #F59E0B;
  --color-warning-active: #D97706;

  /* Danger/error states */
  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-danger-active: #991B1B;

  /* Informational states - using deeper blue */
  --color-info: var(--mc-blue);
  --color-info-hover: #1D4ED8;
  --color-info-active: #1E40AF;

  /* ===========================
     Surface Colors
     =========================== */

  /* Layered background surfaces */
  --color-surface-0: #ffffff;          /* Base surface (cards, modals) */
  --color-surface-1: #f8f9fa;          /* Page background */
  --color-surface-2: #e9ecef;          /* Subtle contrast areas */
  --color-surface-3: #dee2e6;          /* Borders and dividers */

  /* Sidebar specific */
  --color-sidebar: var(--mc-navy);
  --color-sidebar-hover: #1a2845;
  --color-sidebar-active: #2a3855;

  /* ===========================
     Text Colors
     =========================== */

  --color-text-primary: var(--mc-charcoal);
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-disabled: #D1D5DB;
  --color-text-inverse: #ffffff;
  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-primary-hover);

  /* ===========================
     Border Colors
     =========================== */

  --color-border-light: #e5e7eb;
  --color-border-medium: #d1d5db;
  --color-border-dark: #9ca3af;
  --color-border-focus: var(--color-primary);

  /* ===========================
     Spacing Scale
     =========================== */

  /* T-shirt sizing for consistent spacing */
  --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 */

  /* ===========================
     Typography Scale
     =========================== */

  /* Font families */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;

  /* ===========================
     Border Radius
     =========================== */

  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Fully rounded (pills, circles) */

  /* ===========================
     Shadows
     =========================== */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* ===========================
     Focus Indicators
     =========================== */

  /* WCAG 2.1 compliant focus indicators */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary);
  --focus-ring-opacity: 0.5;

  /* ===========================
     Transitions
     =========================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ===========================
     Z-Index Scale
     =========================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ===========================
     Sidebar Dimensions
     =========================== */

  --sidebar-width: 250px;
  --sidebar-collapsed-width: 80px;

  /* ===========================
     Container Max Widths
     =========================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* ===========================
   Dark Mode Theme
   =========================== */

[data-bs-theme="dark"] {
  /* Surface colors for dark mode */
  --color-surface-0: #1a1d21;
  --color-surface-1: #212529;
  --color-surface-2: #2c3034;
  --color-surface-3: #3a3f47;

  /* Sidebar in dark mode */
  --color-sidebar: #0d0f12;
  --color-sidebar-hover: #1a1d21;
  --color-sidebar-active: #212529;

  /* Text colors for dark mode */
  --color-text-primary: #e9ecef;
  --color-text-secondary: #adb5bd;
  --color-text-tertiary: #6c757d;
  --color-text-disabled: #495057;
  --color-text-inverse: #212529;

  /* Border colors for dark mode */
  --color-border-light: #3a3f47;
  --color-border-medium: #495057;
  --color-border-dark: #6c757d;

  /* Adjusted shadows for dark mode (darker, more pronounced) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);

  /* Semantic colors - adjusted for dark mode contrast */
  --color-success: #10b981;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  --color-primary: #38BDF8;  /* Brighter in dark mode */
}

/* ===========================
   High Contrast Mode
   =========================== */

@media (prefers-contrast: high) {
  :root {
    --focus-ring-width: 3px;
    --color-border-light: var(--color-border-medium);
  }
}

/* ===========================
   Reduced Motion
   =========================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}