: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: #cccccc;
  --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;
  
  /*====== Tag Colors ===================================================*/
  /* --tag-a: #458ced; Too light/bright  */
  --tag-a: #5c7bcb;
  --tag-a-10: #5c7bcb1a;
  --tag-b: #7cb342;
  --tag-b-10: #7cb3421a;
  --tag-c: #ed9007;
  --tag-c-10: #ed90071a;
  /*--tag-d: #e629bc;*/
  --tag-d: #93037a;
  --tag-d-10: #93037a1a;
  --tag-e: #3f2360;
  --tag-e-10: #3f23601a;
  
  /*====== Named Colors =================================================*/
  --box-brown: #8f6d3d;
  --favorite: #daa520;

  /*====== Badge Colors =================================================*/
  --badge-info-bg: #f3f5f7;
  --badge-info-color: #515761;
  --badge-info-border: #c1cdd7;
  
  --badge-ebs-bg: #e5f2fd;
  --badge-ebs-color: #2c5cc5;
  --badge-ebs-border: #bbdcfe;
  
  --badge-red-bg: #fef1e1;
  --badge-red-color: #c13e1b;
  --badge-red-border: #fddbb5;
  
  /* Badge Warning - Amber (distinct from Badge C's orange; used for
     caution states like partial/short availability) */
  --badge-warning-bg: #fdf6e3;
  --badge-warning-color: #8a6d00;
  --badge-warning-border: #e0b400;

  /* Badge Alert - Red (distinct from --badge-red and --error; used for
     critical/blocking states like missing components) */
  --badge-alert-bg: #fdecea;
  --badge-alert-color: #b3261e;
  --badge-alert-border: #dc3c30;

  /* Badge Success - Green (distinct from Badge B's olive-green and
     .badge.green's teal; used for fully-available/healthy states) */
  --badge-success-bg: #eaf7ee;
  --badge-success-color: #1e7d3c;
  --badge-success-border: #3fa663;

  /* Badge Secondary - Neutral Gray (used for non-semantic states like
     "No BOM" or age badges with no inherent severity) */
  --badge-secondary-bg: #f3f4f5;
  --badge-secondary-color: #55595e;
  --badge-secondary-border: #b8bcc2;
  
  /* Badge A - Blue (matching panel-bg-cust-a: #458ced) */
  --badge-a-bg: #e3f1fd;
  --badge-a-color: #1a5ba8;
  --badge-a-border: #458ced;

  /* Badge B - Green (matching panel-bg-cust-b: #7cb342) */
  --badge-b-bg: #f1f8e9;
  --badge-b-color: #4e7b29;
  --badge-b-border: #7cb342;

  /* Badge C - Orange (matching panel-bg-cust-c: #ffa726) */
  --badge-c-bg: #fff3e0;
  --badge-c-color: #c77400;
  --badge-c-border: #ffa726;

  /* Badge D - Magenta (matching panel-bg-cust-d: #93037a) */
  --badge-d-bg: #fce4f7;
  --badge-d-color: #6b0259;
  --badge-d-border: #93037a;

  /* Badge E - Purple (matching panel-bg-cust-e: #3f2360) */
  --badge-e-bg: #ebe8ef;
  --badge-e-color: #3f2360;
  --badge-e-border: #3f2360;

  /* Badge F - Dark Blue-Gray (matching panel-bg-cust-f: #415066) */
  --badge-f-bg: #e8eaed;
  --badge-f-color: #2c3644;
  --badge-f-border: #415066;

  /* Badge G - Brown-Gray (matching panel-bg-cust-g: #564d42) */
  --badge-g-bg: #edeae8;
  --badge-g-color: #3d352e;
  --badge-g-border: #564d42;

  /* Badge X - Off-Black (matching panel-bg-cust-x: #333333) */
  --badge-x-bg: #e6e6e6;
  --badge-x-color: #1a1a1a;
  --badge-x-border: #333333;

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