/* =========================================================================
// 01 - SETTINGS - foundations.scss
   ========================================================================= */


/* Global tokens
Global tokens are the primitive values in our design language, represented by context-agnostic names.
Our color palette, animation, typography, and dimension values are all recorded as global tokens.
These can be directly used, and are inherited by all other token types
*/

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&display=block');

/* Base */
:root {
  --color-black: #00060a;
  --color-white: #ffffff;
  --color-gray: #9c9c9c;
  --color-special-bg: #F1F5F8;
  --color-overlay: rgb(0, 56, 101, 50%);

  --color-blue-1: #003865;
  --color-blue-2: #0067B8;
  --color-blue-3: #71C5E8;
  --color-background: #f1f5f8;


  /* Gray | Neutral */
  --color-gray-100: #F9F9F9;
  --color-gray-150: #eaebeb;
  --color-gray-200: #d5d8d7;
  --color-gray-300: #c0c4c4;
  --color-gray-400: #969d9c;
  --color-gray-500: #787e7d;
  --color-gray-600: #5a5e5e;
  --color-gray-700: #3c3f3e;
  --color-gray-800: #1e1f1f;
  --color-gray-900: #00060a;

  /* Blue | Primary */
  --color-primary-800: #000b14;
  --color-primary-700: #001628;
  --color-primary-600: #00223d;
  --color-primary-500: #002d51;
  --color-primary-400: #003865;
  --color-primary-300: #6688a3;
  --color-primary-200: #99afc1;
  --color-primary-150: #ccd7e0;
  --color-primary-100: #e5ebf0;

  /* Blue | Secondary */
  --color-secondary-900: #000a12;
  --color-secondary-800: #001525;
  --color-secondary-700: #00294a;
  --color-secondary-600: #003e6e;
  --color-secondary-500: #005293;
  --color-secondary-400: #0067b8;
  --color-secondary-300: #66a4d4;
  --color-secondary-200: #99c2e3;
  --color-secondary-150: #cce1f1;
  --color-secondary-100: #e2effa;

  /* Blue | Tertiary */
  --color-tertiary-900: #0b1417;
  --color-tertiary-800: #17272e;
  --color-tertiary-700: #2d4f5d;
  --color-tertiary-600: #44768b;
  --color-tertiary-500: #5a9eba;
  --color-tertiary-400: #71c5e8;
  --color-tertiary-300: #aadcf1;
  --color-tertiary-200: #c6e8f6;
  --color-tertiary-150: #E3F3FA;
  --color-tertiary-100: #F1F9FD;

  /* Green | Success */
  --color-success-900: #001205;
  --color-success-800: #00230a;
  --color-success-700: #004714;
  --color-success-600: #006a1e;
  --color-success-500: #008e28;
  --color-success-400: #00b132;
  --color-success-300: #66d084;
  --color-success-200: #99e0ad;
  --color-success-150: #ccefd6;
  --color-success-100: #e5f7ea;

  /* Red | Error */
  --color-error-900: #1a0605;
  --color-error-800: #330c09;
  --color-error-700: #661712;
  --color-error-600: #99231c;
  --color-error-500: #cc2e25;
  --color-error-400: #FF3A2E;
  --color-error-300: #ff8982;
  --color-error-200: #ffb0ab;
  --color-error-150: #ffd8d5;
  --color-error-100: #ffebea;
  --color-error-50: #fef1f1;

  /* Font */
  --font-family: 'Noto Sans', sans-serif;
  --font-size-25: 12px;
  --font-size-50: 14px;
  --font-size-75: 15px;
  --font-size-100: 16px;
  --font-size-200: 18px;
  --font-size-300: 24px;
  --font-size-400: 32px;
  --font-size-500: 40px;
  --font-size-600: 48px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Height */
  --line-height-50: 14px;
  --line-height-100: 16px;
  --line-height-200: 18px;
  --line-height-250: 20px;
  --line-height-300: 24px;
  --line-height-400: 32px;
  --line-height-500: 40px;
  --line-height-600: 48px;
  --line-height-700: 60px;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 48px;
  --spacing-7: 60px;
  --spacing-8: 76px;
  --spacing-9: 92px;
  --spacing-10: 116px;
  --spacing-11: 148px;
  --spacing-12: 164px;
  --spacing-13: 184px;

  /* Border */
  --border-radius-sharp: 0px;
  --border-radius-default: 4px;
  --border-radius-pill: 64px;

  --border-size-default: 1px;
  --border-style-primary: solid;

  /* Box Shadow */
  --box-shadow-default: -0.03px 0.74px 3.07px 0px #00386512, -0.11px 3.26px 6.36px 0px #0038650E;
  --box-shadow-hover: -0.03px 0.74px 3.07px 0px #00386512, -0.11px 3.26px 6.36px 0px #0038650E, -0.27px 8px 12.68px 0px #0038650B, -0.53px 15.4px 24.84px 0px #00386509, -0.89px 25.91px 45.68px 0px #00386507, -1.37px 39.98px 78px 0px #00386504;
  --box-shadow-inner: 0px -1px 6px 0px #00000005 inset;
  --box-shadow-active: 0px 0px 0.23px 0px #71C5E853, 0px 0px 0.65px 0px #71C5E880, 0px 0px 1.74px 0px #71C5E8AC, 0px 0px 4px 0px #71C5E859;

  /* Cursor */
  --cursor-pointer: pointer;
  --cursor-not-allowed: not-allowed;
}