/**
  * Define global palette props first.
  *
  * Global props are used as values for design tokens.
  * 
  * Design tokens can be used throughout your app. Indeed, you should use design tokens instead of other global props in almost all circumstances.
  */
:root,
:host,
.fin-theme-finra {
  --fin-font-sans: 'Open Sans', sans-serif;
  --fin-text-base: '14px';

  --fin-blue-10: #e5f2fa;
  --fin-blue-20: #cce6f6;
  --fin-blue-30: #a0dbff;
  --fin-blue-40: #82cfff;
  --fin-blue-50: #66b4e3;
  --fin-blue-60: #339bda;
  --fin-blue-70: #0070b7;
  --fin-blue-80: #00619c;
  --fin-blue-90: #005182;
  --fin-blue-100: #013f65;

  --fin-navy-10: #ecf2f8;
  --fin-navy-20: #c6daea;
  --fin-navy-30: #7baacf;
  --fin-navy-40: #4485ba;
  --fin-navy-50: #366b95;
  --fin-navy-60: #29506f;
  --fin-navy-70: #1b354a;
  --fin-navy-80: #142837;
  --fin-navy-90: #0d1a25;
  --fin-navy-100: #070d12;

  --fin-gray-10: #ffffff;
  --fin-gray-20: #f7f8fa;
  --fin-gray-30: #edeff3;
  --fin-gray-40: #cfcfd2;
  --fin-gray-50: #aaaaaa;
  --fin-gray-60: #878686;
  --fin-gray-70: #6b6b6b;
  --fin-gray-80: #4a4a4a;
  --fin-gray-90: #1e1e1e;
  --fin-gray-100: #000000;

  --fin-green-10: #e1fcdd;
  --fin-green-20: #bdf2c0;
  --fin-green-30: #8bef8f;
  --fin-green-40: #64e86a;
  --fin-green-50: #4cd151;
  --fin-green-60: #4caf6b;
  --fin-green-70: #0b8559;
  --fin-green-80: #046950;
  --fin-green-90: #044f2b;
  --fin-green-100: #033f2a;

  --fin-yellow-10: #fdefc6;
  --fin-yellow-20: #ffe9ad;
  --fin-yellow-30: #ffe190;
  --fin-yellow-40: #ffdf58;
  --fin-yellow-50: #ffdf1a;
  --fin-yellow-60: #ffd629;
  --fin-yellow-70: #ffc71a;
  --fin-yellow-80: #f7a906;
  --fin-yellow-90: #e37d10;
  --fin-yellow-100: #c65301;

  --fin-gold-10: #fef2e0;
  --fin-gold-20: #fee8c7;
  --fin-gold-30: #fddeae;
  --fin-gold-40: #fdd495;
  --fin-gold-50: #fcca7c;
  --fin-gold-60: #fbb64a;
  --fin-gold-70: #faac31;
  --fin-gold-80: #f39605;
  --fin-gold-90: #da8705;
  --fin-gold-100: #c17804;

  --fin-red-10: #ffebf0;
  --fin-red-20: #ffcdd8;
  --fin-red-30: #ffafc0;
  --fin-red-40: #fe8ca5;
  --fin-red-50: #ff5775;
  --fin-red-60: #ff2956;
  --fin-red-70: #d80e3a;
  --fin-red-80: #bc0c31;
  --fin-red-90: #980725;
  --fin-red-100: #71031a;

  --fin-slate-10: #f3f4f6;
  --fin-slate-20: #e9ebef;
  --fin-slate-30: #d3d8e0;
  --fin-slate-40: #a7b2c2;
  --fin-slate-50: #7b8ba3;
  --fin-slate-60: #4f6585;
  --fin-slate-70: #233e66;
  --fin-slate-80: #1c355a;
  --fin-slate-90: #11233e;
  --fin-slate-100: #0a121d;

  --fin-teal-10: #ccf8f8;
  --fin-teal-20: #aaf4f2;
  --fin-teal-30: #79efed;
  --fin-teal-40: #41d8d6;
  --fin-teal-50: #1cb7b4;
  --fin-teal-60: #009d9a;
  --fin-teal-70: #097b79;
  --fin-teal-80: #04605e;
  --fin-teal-90: #034140;
  --fin-teal-100: #022e2e;

  --fin-purple-10: #f2e7fd;
  --fin-purple-20: #e6c8ff;
  --fin-purple-30: #e1a7ff;
  --fin-purple-40: #ce80ff;
  --fin-purple-50: #b15fff;
  --fin-purple-60: #9137ff;
  --fin-purple-70: #730edd;
  --fin-purple-80: #500ba8;
  --fin-purple-90: #350878;
  --fin-purple-100: #220653;

  /**
    * Design Tokens
    */
  --fin-primary-10: var(--fin-gray-10);
  --fin-primary-20: var(--fin-gray-20);
  --fin-primary-30: var(--fin-gray-30);
  --fin-primary-40: var(--fin-gray-40);
  --fin-primary-50: var(--fin-gray-50);
  --fin-primary-60: var(--fin-gray-60);
  --fin-primary-70: var(--fin-gray-70);
  --fin-primary-80: var(--fin-gray-80);
  --fin-primary-90: var(--fin-gray-90);
  --fin-primary-100: var(--fin-gray-100);

  --fin-secondary-10: var(--fin-blue-10);
  --fin-secondary-20: var(--fin-blue-20);
  --fin-secondary-30: var(--fin-blue-30);
  --fin-secondary-40: var(--fin-blue-40);
  --fin-secondary-50: var(--fin-blue-50);
  --fin-secondary-60: var(--fin-blue-60);
  --fin-secondary-70: var(--fin-blue-70);
  --fin-secondary-80: var(--fin-blue-80);
  --fin-secondary-90: var(--fin-blue-90);
  --fin-secondary-100: var(--fin-blue-100);

  --fin-neutral-10: var(--fin-gray-10);
  --fin-neutral-20: var(--fin-gray-20);
  --fin-neutral-30: var(--fin-gray-30);
  --fin-neutral-40: var(--fin-gray-40);
  --fin-neutral-50: var(--fin-gray-50);
  --fin-neutral-60: var(--fin-gray-60);
  --fin-neutral-70: var(--fin-gray-70);
  --fin-neutral-80: var(--fin-gray-80);
  --fin-neutral-90: var(--fin-gray-90);
  --fin-neutral-100: var(--fin-gray-100);

  --fin-success-10: var(--fin-green-10);
  --fin-success-20: var(--fin-green-20);
  --fin-success-30: var(--fin-green-30);
  --fin-success-40: var(--fin-green-40);
  --fin-success-50: var(--fin-green-50);
  --fin-success-60: var(--fin-green-60);
  --fin-success-70: var(--fin-green-70);
  --fin-success-80: var(--fin-green-80);
  --fin-success-90: var(--fin-green-90);
  --fin-success-100: var(--fin-green-100);

  --fin-error-10: var(--fin-red-10);
  --fin-error-20: var(--fin-red-20);
  --fin-error-30: var(--fin-red-30);
  --fin-error-40: var(--fin-red-40);
  --fin-error-50: var(--fin-red-50);
  --fin-error-60: var(--fin-red-60);
  --fin-error-70: var(--fin-red-70);
  --fin-error-80: var(--fin-red-80);
  --fin-error-90: var(--fin-red-90);
  --fin-error-100: var(--fin-red-100);

  --fin-info-10: var(--fin-info-10);
  --fin-info-20: var(--fin-info-20);
  --fin-info-30: var(--fin-info-30);
  --fin-info-40: var(--fin-info-40);
  --fin-info-50: var(--fin-info-50);
  --fin-info-60: var(--fin-info-60);
  --fin-info-70: var(--fin-info-70);
  --fin-info-80: var(--fin-info-80);
  --fin-info-90: var(--fin-info-90);
  --fin-info-100: var(--fin-info-100);

  --fin-warning-10: var(--fin-yellow-10);
  --fin-warning-20: var(--fin-yellow-20);
  --fin-warning-30: var(--fin-yellow-30);
  --fin-warning-40: var(--fin-yellow-40);
  --fin-warning-50: var(--fin-yellow-50);
  --fin-warning-60: var(--fin-yellow-60);
  --fin-warning-70: var(--fin-yellow-70);
  --fin-warning-80: var(--fin-yellow-80);
  --fin-warning-90: var(--fin-yellow-90);
  --fin-warning-100: var(--fin-yellow-100);

  --fin-foreground-default: var(--fin-gray-100);
  --fin-foreground-inverse: var(--fin-gray-10);
  --fin-foreground-alternate: var(--fin-blue-80);
  --fin-foreground-disabled: var(--fin-slate-50);

  /** 
     *  One-off tokens (this list should be small to avoid complicating our themes)
     */
  --fin-button-primary-background-color: var(--fin-blue-70);
  --fin-button-primary-background-color-disabled: var(--fin-slate-30);
  --fin-button-primary-background-color-hover: var(--fin-slate-70);
  --fin-button-primary-foreground-color: var(--fin-gray-10);
  --fin-button-primary-foreground-color-disabled: var(--fin-slate-40);
  --fin-button-primary-foreground-color-hover: var(--fin-gray-10);
  --fin-button-secondary-background-color: var(--fin-gray-10);
  --fin-button-secondary-background-color-disabled: var(--fin-gray-10);
  --fin-button-secondary-background-color-hover: var(--fin-gray-10);
  --fin-button-secondary-foreground-color: var(--fin-blue-70);
  --fin-button-secondary-foreground-color-disabled: var(--fin-slate-30);
  --fin-button-secondary-foreground-color-hover: var(--fin-slate-70);
  --fin-button-tertiary-background-color: transparent;
  --fin-button-tertiary-background-color-disabled: transparent;
  --fin-button-tertiary-background-color-hover: transparent;
  --fin-button-tertiary-foreground-color: var(--fin-blue-70);
  --fin-button-tertiary-foreground-color-disabled: var(--fin-slate-30);
  --fin-button-tertiary-foreground-color-hover: var(--fin-slate-70);
  --fin-button-alert-background-color: var(--fin-gray-10);
  --fin-button-alert-background-color-disabled: var(--fin-gray-10);
  --fin-button-alert-foreground-color: var(--fin-blue-100);
  --fin-button-alert-foreground-color-disabled: var(--fin-gray-100);

  /* Inputs */
  --fin-input-foreground-color: var(--fin-slate-50);
  --fin-input-foreground-color-disabled: var(--fin-slate-50);
  --fin-input-foreground-color-disabled-selected: var(--fin-slate-50);
  --fin-input-foreground-color-hover: var(--fin-slate-50);
  --fin-input-foreground-color-selected: var(--fin-gray-10);
  --fin-input-background-color: var(--fin-gray-10);
  --fin-input-background-color-disabled: var(--fin-slate-20);
  --fin-input-background-color-disabled-selected: var(--fin-slate-40);
  --fin-input-background-color-hover: var(--fin-slate-40);
  --fin-input-background-color-selected: var(--fin-blue-70);
  --fin-input-border-color: var(--fin-slate-40);
  --fin-input-border-color-disabled: var(--fin-slate-40);
  --fin-input-border-color-disabled-selected: var(--fin-slate-40);
  --fin-input-border-color-hover: var(--fin-slate-40);
  --fin-input-border-color-selected: var(--fin-blue-70);

  /** 
      * One-off tokens (this list should be small to avoid complicating our themes)
      */
}