/* design tokens */
:root { 

  /* screen -- do not change breakpoints */
  --xs-breakpoint: 576px;
  --sm-breakpoint: 768px;
  --md-breakpoint: 992px;
  --lg-breakpoint: 1200px;
  --xl-breakpoint: 1400px;

  /* used for font-size, line-height */
  --xs4-size: 4px;
  --xs3-size: 8px;
  --xs2-size: 10px;
  --xs-size: 12px;
  --sm-size: 14px;
  --md-size: 16px;
  --lg-size: 20px;
  --xl-size: 24px;
  --xl2-size: 32px;
  --xl3-size: 48px;
  --xl4-size: 64px;

  /* used for padding, margin, gap */
  --xs4-space: 1px;
  --xs3-space: 2px;
  --xs2-space: 4px;
  --xs-space: 8px;
  --sm-space: 12px;
  --md-space: 16px;
  --lg-space: 24px;
  --xl-space: 32px;
  --xl2-space: 48px;
  --xl3-space: 64px;
  --xl4-space: 96px;

  /* used for section width, height */
  --xs4-panel: 60px;
  --xs3-panel: 80px;
  --xs2-panel: 100px;
  --xs-panel: 120px;
  --sm-panel: 180px;
  --md-panel: 200px;
  --lg-panel: 280px;
  --xl-panel: 400px;
  --xl2-panel: 600px;
  --xl3-panel: 800px;
  --xl4-panel: 1000px;
  --xl5-panel: 1400px;
  --xl6-panel: 1800px;

  /* outlines */
  --xs-border-width: 1px;
  --sm-border-width: 2px;
  --md-border-width: 3px;
  --lg-border-width: 4px;
  --xl-border-width: 6px;
  --xs-border-radius: 2px;
  --sm-border-radius: 4px;
  --md-border-radius: 8px;
  --lg-border-radius: 12px;
  --xl-border-radius: 16px;

  --xs-shadow: var(--shadow-color) 0px 0px 1px 0px;
  --sm-shadow: var(--shadow-color) 1px 1px 2px 0px;
  --md-shadow: var(--shadow-color) 2px 2px 4px 0px;
  --shadow-color: rgba(0, 0, 0, 0.5);

  --neutral-color-100: #ffffff;
  --neutral-color-90: #eeeeee;
  --neutral-color-80: #d0d0d0;
  --neutral-color-70: #b8b8b8;
  --neutral-color-60: #a0a0a0;
  --neutral-color-50: #888888;
  --neutral-color-40: #6d6d6d;
  --neutral-color-30: #383838;
  --neutral-color-20: #282828;
  --neutral-color-10: #1b1b1b;
  --neutral-color-00: #000000;

  --primary-color-100: #e8eff4;
  --primary-color-90: #d9e3ea;
  --primary-color-80: #8caabd;
  --primary-color-70: #7194a9;
  --primary-color-60: #4b6e85;
  --primary-color-50: #34586e;
  --primary-color-40: #1f4055;
  --primary-color-30: #0f2c3e;
  --primary-color-20: #061c2b;
  --primary-color-10: #01111b;
  --primary-color-00: #000000;

  --secondary-color-100: #f8ebe2;
  --secondary-color-90: #f4d0ba;
  --secondary-color-80: #f4b482;
  --secondary-color-70: #f79951;
  --secondary-color-60: #ef8433;
  --secondary-color-50: #e5711a;
  --secondary-color-40: #af520c;
  --secondary-color-30: #743504;
  --secondary-color-20: #512402;
  --secondary-color-10: #2e1502;
  --secondary-color-00: #000000;

  --accent-color-100: #fbeeff;
  --accent-color-90: #e0b9ed;
  --accent-color-80: #bc84cf;
  --accent-color-70: #a062b5;
  --accent-color-60: #7f3f94;
  --accent-color-50: #642479;
  --accent-color-40: #531767;
  --accent-color-30: #410e53;
  --accent-color-20: #350844;
  --accent-color-10: #290536;
  --accent-color-00: #120018;
  
  --info-color-100: #f0f8fa;
  --info-color-90: #d4e6ec;
  --info-color-80: #c8dee5;
  --info-color-70: #9fd2e1;
  --info-color-60: #5cb7d3;
  --info-color-50: #1587aa;
  --info-color-40: #0c6a87;
  --info-color-30: #05566e;
  --info-color-20: #023d4f;
  --info-color-10: #001d25;
  --info-color-00: #000000;

  --warning-color-100: #fcfcf1;
  --warning-color-90: #e9e9cb;
  --warning-color-80: #d2d19d;
  --warning-color-70: #b8b768;
  --warning-color-60: #adac42;
  --warning-color-50: #9d9b26;
  --warning-color-40: #7f7d18;
  --warning-color-30: #69680c;
  --warning-color-20: #484704;
  --warning-color-10: #343301;
  --warning-color-00: #121200;

  --success-color-100: #ebf8ec;
  --success-color-90: #c9e4cb;
  --success-color-80: #aed2b0;
  --success-color-70: #9ac29d;
  --success-color-60: #76a979;
  --success-color-50: #5f9563;
  --success-color-40: #427a46;
  --success-color-30: #28672c;
  --success-color-20: #104e14;
  --success-color-10: #083b0b;
  --success-color-00: #001201;

  --error-color-100: #fae9eb;
  --error-color-90: #d8b5b7;
  --error-color-80: #a96a6e;
  --error-color-70: #85494d;
  --error-color-60: #833339;
  --error-color-50: #732025;
  --error-color-40: #5b1418;
  --error-color-30: #4a0c10;
  --error-color-20: #3c070a;
  --error-color-10: #240204;
  --error-color-00: #0e0001;

  /* custom tokens */
  --background-color: var(--neutral-color-100);
  --foreground-color: var(--neutral-color-00);
  --background-accent-color: var(--neutral-color-90);

}