/* VelocityEHS Accelerate — Design Tokens
   Include this at the top of any stylesheet or inside a <style> tag.
   All component patterns reference these variables.
*/

:root {
  /* ─── Typography ─── */
  --font-family: 'Open Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --text-size-7: 32px;   /* Page titles, hero numbers */
  --text-size-6: 24px;   /* Section headings, card titles */
  --text-size-5: 20px;   /* Sub-headings */
  --text-size-4: 16px;   /* Body, labels, default */
  --text-size-3: 14px;   /* Secondary text, table rows */
  --text-size-2: 12px;   /* Captions, helper text */
  --text-size-1: 11px;   /* Micro labels, metadata */

  /* ─── Spacing ─── */
  --space-0: 0px;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;

  /* ─── Border Radius ─── */
  --radius-btn:    4px;
  --radius-input:  4px;
  --radius-card:   6px;
  --radius-badge:  100px;

  /* ─── White ─── */
  --white: #FFFFFF;

  /* ─── Gray Scale ─── */
  --gray-100: #1C1F27;
  --gray-90:  #2A2F3A;
  --gray-80:  #313744;
  --gray-65:  #464E61;
  --gray-45:  #6B7181;
  --gray-30:  #9095A0;
  --gray-15:  #B5B8C0;
  --gray-10:  #DADCDF;
  --gray-0:   #F4F5F6;

  /* ─── Blue Scale ─── */
  --blue-110: #052432;
  --blue-100: #0A3142;
  --blue-80:  #0E4A63;
  --blue-75:  #005D7D;
  --blue-70:  #107099;
  --blue-65:  #187BA5;   /* PRIMARY INTERACTIVE */
  --blue-45:  #4695B7;
  --blue-30:  #74B0C9;
  --blue-20:  #8CBBCF;
  --blue-15:  #BAD7E4;
  --blue-0:   #E8F2F6;

  /* ─── Green Scale ─── */
  --green-80: #638B2C;
  --green-65: #8DC63F;
  --green-30: #AFD779;

  /* ─── Yellow Scale ─── */
  --yellow-80: #B1811A;
  --yellow-65: #FDB825;
  --yellow-30: #FECD66;
  --yellow-15: #FEEABE;
  --yellow-0:  #FFF8EB;

  /* ─── Red Scale ─── */
  --red-80: #962B26;
  --red-65: #D63D36;
  --red-30: #E27772;
  --red-0:  #FBECEB;

  /* ─── Brand Colors (logo / marketing only — not for UI chrome) ─── */
  --brand-dark-blue:      #006993;
  --brand-velocity-blue:  #00AFD7;
  --brand-indigo:         #03045E;
  --brand-mid-purple:     #3F37C9;
  --brand-dark-orange:    #FF8500;
  --brand-dark-green:     #289D90;
  --brand-light-green:    #1DD3B0;
  --brand-go-green:       #258968;
  --brand-caution-yellow: #FFBA1B;
  --brand-stop-red:       #CF2D00;

  /* ─── Semantic Aliases ─── */
  --color-background:   var(--gray-0);
  --color-surface:      var(--white);
  --color-text-primary: var(--gray-100);
  --color-text-secondary: var(--gray-45);
  --color-text-disabled: var(--gray-30);
  --color-border:       var(--gray-10);
  --color-primary:      var(--blue-65);
  --color-primary-dark: var(--blue-80);
  --color-primary-light: var(--blue-0);
  --color-nav-bg:       var(--blue-100);
  --color-nav-active:   var(--blue-65);
  --color-link:         var(--blue-65);
  --color-error:        var(--red-65);
  --color-error-bg:     var(--red-0);
  --color-success:      var(--green-65);
  --color-success-bg:   var(--green-30);
  --color-warning:      var(--yellow-65);
  --color-warning-bg:   var(--yellow-0);
  --color-info:         var(--blue-45);
  --color-info-bg:      var(--blue-0);

  /* ─── Data Visualization Series ─── */
  --viz-series-1: #0095CC;
  --viz-series-2: #815487;
  --viz-series-3: #DA6D03;
  --viz-series-4: #B43165;
  --viz-series-5: #04A047;
  --viz-series-6: #136C8C;
  --viz-series-7: #B9801D;
  --viz-series-8: #C8102E;

  --viz-series-1-hover: #0075A1;
  --viz-series-2-hover: #6E3B75;
  --viz-series-3-hover: #AB570D;
  --viz-series-4-hover: #96174F;
  --viz-series-5-hover: #037F38;
  --viz-series-6-hover: #19556C;
  --viz-series-7-hover: #93641C;
  --viz-series-8-hover: #9A1825;

  --viz-series-1-selected: #006C94;
  --viz-series-2-selected: #49254F;
  --viz-series-3-selected: #9C500E;
  --viz-series-4-selected: #5E1833;
  --viz-series-5-selected: #037433;
  --viz-series-6-selected: #183645;
  --viz-series-7-selected: #885B1C;
  --viz-series-8-selected: #61181A;

  /* ─── Highlight Colors (tags, annotations) ─── */
  --highlight-1:  #E29D72;
  --highlight-2:  #E2C272;
  --highlight-3:  #DCE272;
  --highlight-4:  #B7E272;
  --highlight-5:  #92E272;
  --highlight-6:  #72E278;
  --highlight-7:  #72E29D;
  --highlight-8:  #72E2C2;
  --highlight-9:  #72DCE2;
  --highlight-10: #72B7E2;
  --highlight-11: #7292E2;
  --highlight-12: #9D72E2;
  --highlight-13: #C272E2;
  --highlight-14: #E272DC;
  --highlight-15: #E272B7;
  --highlight-16: #E27292;

  /* ─── Shadows ─── */
  --shadow-bottom-border: inset 0 -1px 0 0 #DADCDF;
  --shadow-top-border:    inset 0 1px 0 0 #DADCDF;
  --shadow-selected:      inset 4px 0 0 0 #187BA5;
  --shadow-small:         0 1px 2px 0 rgba(0,36,51,0.25);
  --shadow-medium:        0 3px 6px 0 rgba(0,0,0,0.20);
  --shadow-hover:         0 3px 8px 0 rgba(0,0,0,0.20);
  --shadow-panel:         0 6px 32px 0 rgba(0,0,0,0.20);
  --shadow-card:          0 0 3px 1px rgba(18,22,73,0.15);
  --shadow-modal:         0 4px 16px 0 rgba(0,0,0,0.25);
}