:root {
  /* ===============================
     DESIGN SYSTEM FOUNDATION - SWIL ADMIN
  =============================== */
  
  /* Primary Brand Colors */
  --bs-primary: #287e98;
  --bs-primary-hover: #1e6b83;
  --bs-primary-light: #f0fdff;
  
  /* Semantic Colors */
  --bs-success: #10B981;
  --bs-warning: #F59E0B;
  --bs-danger: #EF4444;
  --bs-info: #3B82F6;
  
  /* Neutral Colors */
  --bs-text-primary: #0B1D36;
  --bs-text-secondary: #4B5563;
  --bs-text-tertiary: #6B7280;
  --bs-text-muted: #9CA3AF;
  
  /* State Colors */
  --bs-disabled-bg: #D1D5DB;
  --bs-disabled-text: #9CA3AF;
  --bs-disabled-border: #E5E7EB;
  
  /* Background Colors */
  --bs-bg-primary: #FFFFFF;
  --bs-bg-secondary: #F9FAFB;
  --bs-bg-tertiary: #F3F4F6;
  
  /* Border Colors */
  --bs-border-color: #E5E7EB;
  --bs-border-light: #F3F4F6;
  --bs-border-dark: #D1D5DB;
  
  /* Vibrant Accent Colors */
  --bright-orange: #FF6B00;
  --sun-yellow: #FFD300;
  --fresh-coral: #FF5A5F;
  --mint-green: #00D3A9;
  --lavender-purple: #B388F6;

  /* ===============================
     SPACING SYSTEM
  =============================== */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.75rem;    /* 12px */
  --space-lg: 1rem;       /* 16px */
  --space-xl: 1.25rem;    /* 20px */
  --space-2xl: 1.5rem;    /* 24px */
  --space-3xl: 2rem;      /* 32px */
  --space-4xl: 2.5rem;    /* 40px */
  --space-5xl: 3rem;      /* 48px */

  /* ===============================
     TYPOGRAPHY SYSTEM
  =============================== */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --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-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* ===============================
     COMPONENT SIZING
  =============================== */
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 8px;
  
  /* Button Heights */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  
  /* Input Heights */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  /* ===============================
     ELEVATION SYSTEM
  =============================== */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  
  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
  --focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.1);

  /* ===============================
     TRANSITIONS
  =============================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}



/* ===============================
   BUTTON BASE STYLES
================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: var(--btn-height-md);
}

.btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===============================
   PRIMARY BUTTON - FILLED
================================= */
.btn-primary {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  color: #fff;
  box-shadow: var(--shadow-base);
}

.btn-primary:active {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(1px);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--bs-disabled-bg);
  border-color: var(--bs-disabled-border);
  color: var(--bs-disabled-text);
  box-shadow: none;
}

/* ===============================
   PRIMARY OUTLINE BUTTON
================================= */
.btn-outline-primary {
  background-color: transparent;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bs-primary-light);
  color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary:active {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  box-shadow: none;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--bs-disabled-text);
  border-color: var(--bs-disabled-border);
  background-color: transparent;
  box-shadow: none;
}

/* ===============================
   SECONDARY BUTTON
================================= */
.btn-secondary {
  background-color: var(--bs-bg-tertiary);
  color: var(--bs-text-primary);
  border-color: var(--bs-border-color);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-disabled-bg);
  border-color: var(--bs-border-dark);
  color: var(--bs-text-primary);
  box-shadow: var(--shadow-base);
}

.btn-secondary:active {
  background-color: var(--bs-border-dark);
  border-color: var(--bs-border-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(1px);
}

/* ===============================
   SUCCESS BUTTON
================================= */
.btn-success {
  background-color: var(--bs-success);
  color: #fff;
  border-color: var(--bs-success);
  box-shadow: var(--shadow-sm);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #059669;
  border-color: #059669;
  color: #fff;
  box-shadow: var(--shadow-base);
}

/* ===============================
   DANGER BUTTON
================================= */
.btn-danger {
  background-color: var(--bs-danger);
  color: #fff;
  border-color: var(--bs-danger);
  box-shadow: var(--shadow-sm);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
  box-shadow: var(--shadow-base);
}

.btn-danger:focus {
  box-shadow: var(--focus-ring-error);
}

/* ===============================
   GHOST BUTTON
================================= */
.btn-ghost {
  background-color: transparent;
  color: var(--bs-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--bs-bg-secondary);
  color: var(--bs-text-primary);
  border-color: transparent;
  box-shadow: none;
}

/* ===============================
   BUTTON SIZES
================================= */
.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  min-height: var(--btn-height-sm);
  border-radius: var(--bs-border-radius-sm);
}

.btn-md {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  min-height: var(--btn-height-md);
  border-radius: var(--bs-border-radius);
}

.btn-lg {
  padding: 12px 24px;
  font-size: var(--font-size-base);
  min-height: var(--btn-height-lg);
  border-radius: var(--bs-border-radius-lg);
}

/* ===============================
   BUTTON GROUPS
================================= */
.btn-group {
  display: inline-flex;
  align-items: center;
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
  border-right-width: 1px;
}

.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active {
  z-index: 1;
}

/* ===============================
   ICON BUTTONS
================================= */
.btn-icon {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0;
  border-radius: 50%;
}

.btn-icon.btn-sm {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
}

.btn-icon.btn-lg {
  width: var(--btn-height-lg);
  height: var(--btn-height-lg);
}

/* ===============================
   BUTTON WITH ICONS
================================= */
.btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-sm .icon {
  width: 14px;
  height: 14px;
}

.btn-lg .icon {
  width: 18px;
  height: 18px;
}