:root {
  /*====== Button & Link Colors ===========================================*/
  --primary-color: rgb(194,24,7);
  --primary-color-hover: #fefefe;
  --primary-color-text: #fefefe;
  
  --accent-color: #8b0100;
  --accent-color-bg: #8b0100;
  --accent-color-text: #fefefe;
  
  --primary-color-light: rgba(194,24,7,0.6);
  
  --gray-text:#3b3131;
  
  --link-color:rgb(194,24,7);
  --link-color-hover:rgb(172,20,6);
  --button-bg-color:rgb(194,24,7);
  --button-bg-color-hover:rgb(172,20,6);
  --button-color: #fefefe;
  --button-color-hover: #fefefe;
  
  --callout-accent-dk: rgb(172,20,6);
  --callout-accent-lt: rgb(194,24,7);
  
  --checkbox-color: #222222;
  
  /*====== Header Layout Colors ==========================================*/
  --apex-bg-color: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --apex-color: #495057;
  --apex-border-color: transparent;
  
  --bg-cust-logo: #ffffff;
  
  --nav-bg-color: #333131;
  --nav-color: #ffffff;
  
  --footer-bg-color: #3b3b3b;
  --footer-color: #fefefe;
  --footer-color-hover: rgba(255,255,255,0.75);
  --footer-btm-bg-color: #222222;
  
  /*====== Footer Layout Colors =================================================*/
  --footer-bg-color: #3b3b3b;
  --footer-color: #fefefe;
  --footer-color-hover: rgba(255,255,255,0.75);
  --footer-btm-bg-color: #222222;
  /*--footer-btm-color: rgb(255,255,255,0.8);*/
  --footer-btm-color: #eee;
  /*====== Feedback Colors =================================================*/
  --alert: #fff6bf;
  --error: #8a1f11;
  --error-bg: #fcd6d6;
  --info-bg: #d7ecfa;
  --warning: #fff3d9;
  /*====== Standard Colors =================================================*/
  --black: #222222;
  --white: #fefefe;
  --x-light-gray: #fafafa;
  --light-gray: #f0f0f0;
  --light-gray-text: #999999;
  --gray: #cccccc;
  --dark-gray: #808080;
  --highlighter: #ffff73;
  
  /*====== Named Colors =================================================*/
  --box-brown: #8f6d3d;

/*====== Modal Colors ===========================================*/
  /* Default/Success theme - Black-gray with red accents */
  --modal-primary-bg: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
  --modal-primary-text: #ffffff;
  
  --modal-highlight-bg: #333131;
  --modal-highlight-shadow: rgba(194, 24, 7, 0.15);
  --modal-highlight-text: #ffffff;
  
  --modal-close-btn-bg: rgba(255, 255, 255, 0.1);
  --modal-close-btn-bg-hover: rgba(194, 24, 7, 0.8);
  --modal-close-btn-text: #ffffff;
  
  --modal-status-icon-bg: rgba(194, 24, 7, 0.15);
  --modal-status-icon-text: rgb(194, 24, 7);
  
  --modal-note-bg: rgba(194, 24, 7, 0.08);
  --modal-note-text: #fefefe;
  
  /* Critical/Warning theme - Red emphasis */
  --modal-critical-bg: rgb(194, 24, 7);
  --modal-critical-shadow: rgba(194, 24, 7, 0.25);
  --modal-critical-text: #ffffff;
  --modal-critical-note-bg: rgba(255, 255, 255, 0.95);
  --modal-critical-note-text: #222222;
  
  /* Delete/Cancel theme */
  --modal-delete-header-bg: linear-gradient(135deg, #8b0100 0%, #6b0100 100%);
  --modal-delete-highlight-bg: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
  --modal-delete-highlight-border: #fecaca;
  --modal-delete-highlight-shadow: rgba(139, 1, 0, 0.1);
  --modal-delete-highlight-text: #222222;
  --modal-delete-icon-bg: rgba(139, 1, 0, 0.12);
  --modal-delete-icon-text: #8b0100;
  --modal-delete-note-bg: rgba(194, 24, 7, 0.08);
  --modal-delete-note-text: #6b0100;
  --modal-delete-note-border: rgb(194, 24, 7);
  
  /* Info theme - Neutral gray with red accent */
  --modal-info-header-bg: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
  --modal-info-highlight-bg: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  --modal-info-highlight-border: rgba(194, 24, 7, 0.25);
  --modal-info-highlight-shadow: rgba(194, 24, 7, 0.12);
  --modal-info-highlight-text: #222222;
  --modal-info-icon-bg: rgba(194, 24, 7, 0.1);
  --modal-info-icon-text: rgb(194, 24, 7);
  --modal-info-note-bg: rgba(194, 24, 7, 0.05);
  --modal-info-note-text: #222222;
  --modal-info-note-border: rgba(194, 24, 7, 0.3);
  
  /* Detail items */
  --modal-detail-bg: #f8f8f8;
  --modal-detail-bg-hover: #fff5f5;
  --modal-detail-border: rgb(194, 24, 7);
  --modal-detail-label: rgba(194, 24, 7, 0.7);
  --modal-detail-value: #222222;
  
  --modal-detail-warning-bg: #fff5f5;
  --modal-detail-warning-bg-hover: #ffe5e5;
  --modal-detail-warning-border: rgb(194, 24, 7);
  --modal-detail-warning-label: rgb(139, 1, 0);
  --modal-detail-warning-value: #222222;
  
  --modal-detail-error-bg: #fff0f0;
  --modal-detail-error-bg-hover: #ffe0e0;
  --modal-detail-error-border: #8b0100;
  --modal-detail-error-label: #8b0100;
  --modal-detail-error-value: #222222;
  
  /* Form elements */
  --modal-form-bg: #fafafa;
  --modal-form-border: rgba(194, 24, 7, 0.2);
  --modal-form-label: #222222;
  --modal-required-indicator: rgb(194, 24, 7);
  
  --modal-input-bg: #ffffff;
  --modal-input-border: #cccccc;
  --modal-input-border-focus: rgb(194, 24, 7);
  --modal-input-shadow-focus: rgba(194, 24, 7, 0.15);
  --modal-input-text: #222222;
  
  /* Buttons */
  --modal-btn-success-bg: rgb(194, 24, 7);
  --modal-btn-success-bg-hover: rgb(172, 20, 6);
  --modal-btn-success-text: #ffffff;
  
  --modal-btn-cancel-bg: #3b3131;
  --modal-btn-cancel-bg-hover: #2a2a2a;
  --modal-btn-cancel-text: #ffffff;
  
  --modal-btn-delete-bg: #8b0100;
  --modal-btn-delete-bg-hover: #6b0100;
  --modal-btn-delete-text: #ffffff;
  
  --modal-btn-secondary-bg: #ffffff;
  --modal-btn-secondary-bg-hover: #f5f5f5;
  --modal-btn-secondary-border: #cccccc;
  --modal-btn-secondary-border-hover: #999999;
  --modal-btn-secondary-text: #222222;
  
  /* Disabled button states */
  --modal-btn-success-disabled-bg: rgba(194, 24, 7, 0.4);
  --modal-btn-cancel-disabled-bg: rgba(59, 49, 49, 0.4);
  --modal-btn-delete-disabled-bg: rgba(139, 1, 0, 0.4);
  --modal-btn-secondary-disabled-bg: #f0f0f0;
  --modal-btn-secondary-disabled-text: #999999;

}
  
.box-brown{
  color: var(--box-brown);
}