@import './colors';

// Global CSS variables (custom properties). 
// Variable names should follow this pattern: --ec-<css-property>[-<dash delimited modifiers>]. 
// If the variable is the default value, don't include a modifier
// For example, the primary dark color should be named --ec-color-primary-dark 
// and default border color should be --ec-border-color

:root {
  // Variables for the EnergyCAP brand color pallette
  // Colors go from lighter (1) to darker (8).
  --ec-color-black: #{$black}; 
  --ec-color-white: #{$white};

  --ec-color-gray-1: #{$gray-1};
  --ec-color-gray-2: #{$gray-2};
  --ec-color-gray-3: #{$gray-3};
  --ec-color-gray-4: #{$gray-4};
  --ec-color-gray-5: #{$gray-5};
  --ec-color-gray-6: #{$gray-6};
  --ec-color-gray-7: #{$gray-7};
  --ec-color-gray-8: #{$gray-8};

  --ec-color-red-1: #{$red-1};
  --ec-color-red-2: #{$red-2};
  --ec-color-red-3: #{$red-3};
  --ec-color-red-4: #{$red-4};
  --ec-color-red-5: #{$red-5};
  --ec-color-red-6: #{$red-6};
  --ec-color-red-7: #{$red-7};
  --ec-color-red-8: #{$red-8};

  --ec-color-orange-1: #{$orange-1};
  --ec-color-orange-2: #{$orange-2};
  --ec-color-orange-3: #{$orange-3};
  --ec-color-orange-4: #{$orange-4};
  --ec-color-orange-5: #{$orange-5};
  --ec-color-orange-6: #{$orange-6};
  --ec-color-orange-7: #{$orange-7};
  --ec-color-orange-8: #{$orange-8};

  --ec-color-yellow-1: #{$yellow-1};
  --ec-color-yellow-2: #{$yellow-2};
  --ec-color-yellow-3: #{$yellow-3};
  --ec-color-yellow-4: #{$yellow-4};
  --ec-color-yellow-5: #{$yellow-5};
  --ec-color-yellow-6: #{$yellow-6};
  --ec-color-yellow-7: #{$yellow-7};
  --ec-color-yellow-8: #{$yellow-8};

  --ec-color-green-1: #{$green-1};
  --ec-color-green-2: #{$green-2};
  --ec-color-green-3: #{$green-3};
  --ec-color-green-4: #{$green-4};
  --ec-color-green-5: #{$green-5};
  --ec-color-green-6: #{$green-6};
  --ec-color-green-7: #{$green-7};
  --ec-color-green-8: #{$green-8};

  --ec-color-blue-1: #{$blue-1};
  --ec-color-blue-2: #{$blue-2};
  --ec-color-blue-3: #{$blue-3};
  --ec-color-blue-4: #{$blue-4};
  --ec-color-blue-5: #{$blue-5};
  --ec-color-blue-6: #{$blue-6};
  --ec-color-blue-7: #{$blue-7};
  --ec-color-blue-8: #{$blue-8};

  --ec-color-purple-1: #{$purple-1};
  --ec-color-purple-2: #{$purple-2};
  --ec-color-purple-3: #{$purple-3};
  --ec-color-purple-4: #{$purple-4};
  --ec-color-purple-5: #{$purple-5};
  --ec-color-purple-6: #{$purple-6};
  --ec-color-purple-7: #{$purple-7};
  --ec-color-purple-8: #{$purple-8};

  --ec-color-cobalt-1: #{$cobalt-1};
  --ec-color-cobalt-2: #{$cobalt-2};
  --ec-color-cobalt-3: #{$cobalt-3};
  --ec-color-cobalt-4: #{$cobalt-4};
  --ec-color-cobalt-5: #{$cobalt-5};
  --ec-color-cobalt-6: #{$cobalt-6};
  --ec-color-cobalt-7: #{$cobalt-7};
  --ec-color-cobalt-8: #{$cobalt-8};

  --ec-color-aqua-1: #{$aqua-1};
  --ec-color-aqua-2: #{$aqua-2};
  --ec-color-aqua-3: #{$aqua-3};
  --ec-color-aqua-4: #{$aqua-4};
  --ec-color-aqua-5: #{$aqua-5};
  --ec-color-aqua-6: #{$aqua-6};
  --ec-color-aqua-7: #{$aqua-7};
  --ec-color-aqua-8: #{$aqua-8};

  --ec-color-pink-1: #{$pink-1};
  --ec-color-pink-2: #{$pink-2};
  --ec-color-pink-3: #{$pink-3};
  --ec-color-pink-4: #{$pink-4};
  --ec-color-pink-5: #{$pink-5};
  --ec-color-pink-6: #{$pink-6};
  --ec-color-pink-7: #{$pink-7};
  --ec-color-pink-8: #{$pink-8};

  --ec-color-brand-green: rgb(216, 234, 83);
  --ec-color-brand-black: rgb(22, 47, 59);

  // Colors
  --ec-color-primary-dark: var(--ec-color-black);
  --ec-color-primary-light: var(--ec-color-white);
  --ec-color-secondary-dark: rgba(26, 26, 35, .66);
  --ec-color-secondary-light: rgba(255, 255, 255, .6);
  --ec-color-hint-dark: rgba(26, 26, 35, .38);
  --ec-color-hint-light: rgba(255, 255, 255, .38);
  --ec-color-disabled-dark: var(--ec-color-hint-dark);
  
  // TODO: where is this used and what would the new value be
  --ec-color-shadow: rgba(26, 26, 35, .1);
  // TODO: where is this used and what would the new value be
  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);

  --ec-color-interactive: var(--ec-color-cobalt-6);
  --ec-color-link: var(--ec-color-interactive);
  --ec-color-link-light: var(--ec-color-blue-2);

  --ec-color-info: var(--ec-color-cobalt-6);
  --ec-color-success: var(--ec-color-green-6);
  // Deprecated - use ec-color-success
  --ec-color-good: var(--ec-color-success);
  --ec-color-caution: var(--ec-color-yellow-8);
  --ec-color-danger: var(--ec-color-red-7);
  // Deprecated - use ec-color-danger
  --ec-color-bad: var(--ec-color-danger);
  --ec-color-accent: var(--ec-color-purple-6);

  // TODO: where is this used and what would the new value be
  --ec-color-control-invalid: var(--ec-color-caution);

  // TODO: where is this used and what would the new value be
  --ec-color-accrual: #{$ec-color-accrual};

  --ec-color-tour-title: var(--ec-color-primary-light);
  
  --ec-background-color: rgb(255, 255, 255);
  --ec-background-color-overlay: rgba(255, 255, 255, .7);
  --ec-background-color-body: rgb(241, 243, 244);
  --ec-background-color-body-overlay: rgba(241, 243, 244, .7);
  --ec-background-color-dark: rgb(26, 26, 35);
  --ec-background-color-dialog: rgba(26, 26, 35, .5);
  --ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);
  --ec-background-color-tour: var(--ec-color-gray-8);
  --ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%),
  radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), 
  radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;
  --ec-background-color-detail: rgba(26, 26, 35, .03);
  --ec-background-color-disabled: rgba(26,26,35, .1);
  --ec-background-color-hover: rgb(195, 212, 247);
  --ec-background-color-selected: rgb(225, 233, 249);

  --ec-background-color-info: rgb(218, 229, 251);
  --ec-background-color-success: rgb(227, 251, 214);
  --ec-background-color-caution: rgb(255, 249, 195);
  --ec-background-color-danger: rgb(255, 225, 231);
  --ec-background-color-accent: rgb(237, 220, 255);
  --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
  --ec-background-color-control: var(--ec-background-color);
  
  // Shadows
  --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);

  // Borders
  --ec-border-color: #D6D6D7;
  --ec-border-color-dark: #383840;
  --ec-border-color-hint: var(--ec-color-gray-1);
  --ec-border-color-control: var(--ec-color-gray-4);
  --ec-border-color-control-disabled: var(--ec-border-color-control);
  --ec-border-color-control-readonly: transparent;

  --ec-border-radius: .25rem;
  --ec-border-radius-card: .375rem;
  --ec-border-radius-dialog: .5rem;
  --ec-border-color-focus: var(--ec-color-interactive);
  --ec-border-width: 1px;

  // Fonts
  --ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --ec-font-family-monospace: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;
  
  --ec-font-size: .875rem;
  --ec-font-size-body: 1rem;
  --ec-font-size-label: .75rem;
  --ec-font-size-action: .875rem;
  --ec-font-size-title: 1.25rem;
  --ec-font-size-icon: 1rem;
  --ec-font-size-tiny: .625rem;

  --ec-font-weight-bold: bold;
  --ec-font-weight-normal: normal;

  // Z-indexes
  --ec-z-index-sticky-header: 3;
  --ec-z-index-sticky-page-header: 10;
  --ec-z-index-overlay: 20;
  --ec-z-index-splitter: 30;
  --ec-z-index-navbar: 40;
  --ec-z-index-popup: 50;
  --ec-z-index-dialog: 60;
  --ec-z-index-toast: 70;

  // Form Controls
  --ec-form-control-background-color: var(--ec-background-color);
  --ec-form-control-color: var(--ec-color-primary-dark);
  --ec-form-control-color-placeholder: var(--ec-color-hint-dark);
  --ec-form-control-background-color-selection: var(--ec-color-interactive);
  --ec-form-control-color-selection: var(--ec-color-primary-light);
  --ec-form-control-border-color: var(--ec-color-gray-4);
  --ec-form-control-border-radius: var(--ec-border-radius);
  --ec-form-control-font-size: var(--ec-font-size-body);
  --ec-form-control-border-color-focus: var(--ec-background-color);
  --ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);
  --ec-form-control-background-color-invalid: var(--ec-background-color-caution);
  --ec-form-control-color-invalid: var(--ec-color-primary-dark);
  --ec-form-control-border-color-invalid: var(--ec-color-caution);
  --ec-form-control-background-color-disabled: var(--ec-background-color-disabled);
  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
  --ec-form-control-border-color-disabled: var(--ec-color-gray-4);
  --ec-form-control-opacity-disabled: .6;
  --ec-form-control-background-color-readonly: var(--ec-background-color-disabled);
  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
  --ec-form-control-border-color-readonly: var(--ec-color-gray-4);
}