/* ========================================
   DataExchange Design Tokens
   ========================================

   Enterprise-focused design system with compact sizing
   optimized for desktop business applications.

   Version: 1.0.0
   Last Updated: 2025-11-21
   ======================================== */

:root {
  /* ========================================
     TYPOGRAPHY SCALE
     ======================================== */

  /* Base font sizes (enterprise compact scale) */
  --text-xs: 0.6875rem;   /* 11px - micro text, badges */
  --text-sm: 0.8125rem;   /* 13px - table data, secondary text */
  --text-base: 0.875rem;  /* 14px - body text, inputs, buttons */
  --text-md: 0.9375rem;   /* 15px - emphasized text */
  --text-lg: 1rem;        /* 16px - section headers */
  --text-xl: 1.125rem;    /* 18px - page titles */
  --text-2xl: 1.25rem;    /* 20px - main headers */
  --text-3xl: 1.5rem;     /* 24px - hero titles */

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

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

  /* ========================================
     SPACING SCALE
     ======================================== */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ========================================
     COMPONENT SIZES
     ======================================== */

  /* Buttons */
  --btn-padding-y-sm: 0.25rem;      /* 4px */
  --btn-padding-x-sm: 0.625rem;     /* 10px */
  --btn-font-size-sm: var(--text-sm);
  --btn-height-sm: 28px;

  --btn-padding-y: 0.375rem;        /* 6px */
  --btn-padding-x: 0.875rem;        /* 14px */
  --btn-font-size: var(--text-base);
  --btn-height: 34px;

  --btn-padding-y-lg: 0.5rem;       /* 8px */
  --btn-padding-x-lg: 1.25rem;      /* 20px */
  --btn-font-size-lg: var(--text-md);
  --btn-height-lg: 42px;

  /* Input fields */
  --input-padding-y-sm: 0.25rem;    /* 4px */
  --input-padding-x-sm: 0.625rem;   /* 10px */
  --input-font-size-sm: var(--text-sm);
  --input-height-sm: 30px;

  --input-padding-y: 0.375rem;      /* 6px */
  --input-padding-x: 0.75rem;       /* 12px */
  --input-font-size: var(--text-base);
  --input-height: 36px;

  --input-padding-y-lg: 0.5rem;     /* 8px */
  --input-padding-x-lg: 1rem;       /* 16px */
  --input-font-size-lg: var(--text-md);
  --input-height-lg: 44px;

  /* Tables */
  --table-cell-padding-y: 0.5rem;   /* 8px */
  --table-cell-padding-x: 0.75rem;  /* 12px */
  --table-font-size: var(--text-sm);
  --table-header-font-size: var(--text-sm);
  --table-row-height: 40px;

  /* Cards */
  --card-padding: var(--space-4);
  --card-header-padding: var(--space-3) var(--space-4);
  --card-border-radius: 8px;

  /* Modals */
  --modal-header-padding: var(--space-3) var(--space-4);
  --modal-body-padding: var(--space-4);
  --modal-footer-padding: var(--space-3) var(--space-4);

  /* Badges */
  --badge-padding-y: 0.25rem;
  --badge-padding-x: 0.5rem;
  --badge-font-size: var(--text-xs);

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --border-radius-sm: 4px;
  --border-radius: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;

  --border-width: 1px;
  --border-color: #d0d0d0;
  --border-color-light: #e0e0e0;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ========================================
     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;

  /* ========================================
     MYGATE THEME COLORS
     ======================================== */

  /* Primary (Brand Red) */
  --color-primary: #aa343b;
  --color-primary-hover: #742429;
  --color-primary-light: #d14950;

  /* Neutral */
  --color-dark: #333333;
  --color-gray-700: #555555;
  --color-gray-500: #777777;
  --color-gray-300: #999999;
  --color-gray-200: #d0d0d0;
  --color-gray-100: #e0e0e0;
  --color-gray-50: #f6f6f6;

  /* Semantic Colors */
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Text Colors */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
}

/* ========================================
   GLOBAL BASE STYLES
   ======================================== */

body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

/* ========================================
   PAGE LAYOUT UTILITIES
   ======================================== */

.page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0;
  margin-bottom: var(--space-4);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* ========================================
   SPACING UTILITIES (Override Bootstrap)
   ======================================== */

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

/* Gap utilities for flex/grid */
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-3); }
.gap-lg { gap: var(--space-4); }