/* === supportSlice brand tokens === */
:root {
    /* Brand bases */
    --brand-blue-500:  #3840A8;
    --brand-blue-600:  #2F3790;
    --brand-blue-700:  #262E79;
    --brand-blue-100:  #E7E9FA;
    --brand-blue-200:  #C9CEF3;
  
    --brand-orange-500:#FF7A00;
    --brand-orange-600:#E66E00;
    --brand-orange-700:#C45E00;
    --brand-orange-100:#FFE9D6;
    --brand-orange-200:#FFD1A8;
  
    --brand-green-500: #2AB673;
    --brand-green-600: #239A61;
  
    --brand-red-500:   #E03A3A;
    --brand-red-600:   #C53131;
  
    --brand-warning:   #FFB300;
    --brand-info:      #2EB7FF;
  
    --brand-gray-100:  #F4F6FA;
    --brand-gray-400:  #A7AFC0;
    --brand-gray-700:  #3B4151;
    --brand-gray-900:  #111318;
  }
  
  /* === Bootstrap variable overrides === */
  :root {
    /* Primary / Secondary */
    --bs-primary:              var(--brand-blue-500);
    --bs-primary-rgb:          56, 64, 168;
    --bs-primary-hover:        var(--brand-blue-600);
    --bs-primary-active:       var(--brand-blue-700);
  
    --bs-secondary:            var(--brand-orange-500);
    --bs-secondary-rgb:        255, 122, 0;
    --bs-secondary-hover:      var(--brand-orange-600);
    --bs-secondary-active:     var(--brand-orange-700);
  
    /* Semantic */
    --bs-success:              var(--brand-green-500);
    --bs-success-rgb:          42, 182, 115;
  
    --bs-danger:               var(--brand-red-500);
    --bs-danger-rgb:           224, 58, 58;
  
    --bs-warning:              var(--brand-warning);
    --bs-warning-rgb:          255, 179, 0;
  
    --bs-info:                 var(--brand-info);
    --bs-info-rgb:             46, 183, 255;
  
    /* Grays / text / background */
    --bs-body-color:           var(--brand-gray-900);
    --bs-secondary-color:      var(--brand-gray-700);
    --bs-border-color:         var(--brand-gray-400);
    /* --bs-body-bg:              var(--brand-gray-100); */
  }
  
  /* Optional: button/link hover/active using our hover vars */
  .btn-primary {
    --bs-btn-bg:        var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg:  var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-bg: var(--brand-blue-200);
    --bs-btn-disabled-border-color: var(--brand-blue-200);
  }
  
  .btn-secondary {
    --bs-btn-bg:        var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg:  var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-active-bg: var(--bs-secondary-active);
    --bs-btn-active-border-color: var(--bs-secondary-active);
    --bs-btn-disabled-bg: var(--brand-orange-200);
    --bs-btn-disabled-border-color: var(--brand-orange-200);
  }
  
  /* Links adopt primary brand */
  a,
  .link-primary {
    color: var(--bs-primary);
  }
  a:hover,
  .link-primary:hover {
    color: var(--bs-primary-hover);
  }
  
  /* Utility backgrounds (cards, badges, alerts feel on-brand) */
  .bg-primary-subtle  { background-color: var(--brand-blue-100) !important; }
  .bg-secondary-subtle{ background-color: var(--brand-orange-100) !important; }
  .text-primary-contrast { color: #fff !important; } /* for primary surfaces */
  .text-secondary-contrast { color: #fff !important; } /* for orange surfaces */
  
  /* === Accessibility Enhancements === */
  
  /* Skip to content link */
  .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Enhanced focus indicators */
  a:focus,
  button:focus,
  input:focus,
  textarea:focus,
  select:focus,
  .btn:focus {
    outline: 3px solid var(--brand-blue-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(56, 64, 168, 0.25);
  }
  
  /* Button enhancements beyond color-only differentiation */
  .btn-primary {
    border: 2px solid var(--bs-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
    border: 2px solid var(--bs-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .btn-outline-primary {
    border: 2px solid var(--bs-primary);
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    border: 2px solid var(--bs-primary-hover);
    background: var(--bs-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  /* Link enhancements */
  a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  
  a:not(.btn):hover,
  a:not(.btn):focus {
    text-decoration-thickness: 2px;
  }
  
  /* Form control improvements */
  .form-control:focus,
  .form-select:focus,
  .form-range:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(56, 64, 168, 0.25);
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      --bs-primary: #000080;
      --bs-secondary: #8B4513;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .btn:focus {
      transform: none;
      transition: none;
    }
  }