:root {
  /**** Primitive Color ****/
  --white-alpha-10: #ffffffff;
  --white-alpha-9: #ffffffe6;
  --white-alpha-8: #ffffffcc;
  --white-alpha-7: #ffffffb3;
  --white-alpha-6: #ffffff99;
  --white-alpha-5: #ffffff80;
  --white-alpha-4: #ffffff66;
  --white-alpha-3: #ffffff4d;
  --white-alpha-2: #ffffff33;
  --white-alpha-1: #ffffff1a;
  --white-alpha-0: #ffffff0d;

  --black-alpha-10: #000000ff;
  --black-alpha-9: #000000e6;
  --black-alpha-8: #000000cc;
  --black-alpha-7: #000000b3;
  --black-alpha-6: #00000099;
  --black-alpha-5: #00000080;
  --black-alpha-4: #00000066;
  --black-alpha-3: #0000004d;
  --black-alpha-2: #00000033;
  --black-alpha-1: #0000001a;
  --black-alpha-0: #0000000d;

  --grey-1: #edecec;
  --grey-2: #d3d0d0;
  --grey-3: #b1abac;
  --grey-4: #8c8485;
  --grey-5: #6a5f60;
  --grey-6: #493c3d;
  --grey-7: #3e3334;
  --grey-8: #342b2b;
  --grey-9: #2a2223;
  --grey-10: #211b1b;
  --grey-rgb: 73, 60, 61;

  --rose-1: #f6edef;
  --rose-2: #ead5d9;
  --rose-3: #d9b3bb;
  --rose-4: #c78f9b;
  --rose-5: #b66e7d;
  --rose-6: #a64e60;
  --rose-7: #8d4252;
  --rose-8: #763744;
  --rose-9: #5f2c37;
  --rose-10: #4b232b;
  --rose-rgb: 166, 78, 96;

  --red-1: #fbf4f3;
  --red-2: #f5e5e3;
  --red-3: #edd0cd;
  --red-4: #e5bab6;
  --red-5: #dda5a0;
  --red-6: #d5918b;
  --red-7: #b57b76;
  --red-8: #976763;
  --red-9: #79534f;
  --red-10: #60413f;
  --red-rgb: 213, 145, 139;

  --orange-1: #fefaf8;
  --orange-2: #fcf3ef;
  --orange-3: #faeae2;
  --orange-4: #f7e1d5;
  --orange-5: #f5d8c8;
  --orange-6: #f3cfbc;
  --orange-7: #cfb0a0;
  --orange-8: #ad9385;
  --orange-9: #8b766b;
  --orange-10: #6d5d55;
  --orange-rgb: 243, 207, 188;

  --green-1: #f3f8f4;
  --green-2: #e1eee3;
  --green-3: #cae1ce;
  --green-4: #b1d3b7;
  --green-5: #99c6a1;
  --green-6: #83b98c;
  --green-7: #6f9d77;
  --green-8: #5d8363;
  --green-9: #4b6950;
  --green-10: #3b533f;
  --green-rgb: 131, 185, 140;

  --blue-1: #f1f7f9;
  --blue-2: #ddeef3;
  --blue-3: #c6e1eb;
  --blue-4: #add4e1;
  --blue-5: #93c7d7;
  --blue-6: #7db0c0;
  --blue-7: #6997a6;
  --blue-8: #577d8a;
  --blue-9: #48656f;
  --blue-10: #3b5059;
  --blue-rgb: 125, 176, 192;

  --yellow-1: #fef9f0;
  --yellow-2: #fcf1de;
  --yellow-3: #f7e4c3;
  --yellow-4: #f1d6a8;
  --yellow-5: #ebc88d;
  --yellow-6: #e5b77a;
  --yellow-7: #cfa362;
  --yellow-8: #b28c4e;
  --yellow-9: #94763f;
  --yellow-10: #78612f;
  --yellow-rgb: 229, 183, 122;

  --danger: #a40a24;
  --danger-light: #f4e0e3;

  /* Default Primary Color Set */
  --color-primary-1: var(--rose-1);
  --color-primary-2: var(--rose-2);
  --color-primary-3: var(--rose-3);
  --color-primary-4: var(--rose-4);
  --color-primary-5: var(--rose-5);
  --color-primary-6: var(--rose-6);
  --color-primary-7: var(--rose-7);
  --color-primary-8: var(--rose-8);
  --color-primary-9: var(--rose-9);
  --color-primary-10: var(--rose-10);
  --color-primary-rgb: var(--rose-rgb);

  /**** Semantics Color ****/
  /* background */
  --color-background: var(--color-grey-10);

  /* surface */
  --color-surface-base-primary: var(--white-alpha-10);
  --color-surface-base-secondary: var(--orange-2);
  --color-surface-base-tertiary: var(--orange-3);

  --color-surface-primary: var(--rose-6);
  --color-surface-primary-light: rgba(var(--rose-rgb), 0.125);

  --color-surface-danger: var(--danger);
  --color-surface-danger-light: var(--danger-light);

  --color-surface-success: var(--green-8);
  --color-surface-success-light: var(--green-2);

  --color-surface-warning: var(--yellow-6);
  --color-surface-warning-light: var(--yellow-2);

  --color-surface-info: var(--blue-7);
  --color-surface-info-light: var(--blue-2);

  /* text */
  --color-text-base-high: var(--grey-9);
  --color-text-base-middle: var(--grey-8);
  --color-text-base-low: var(--grey-6);
  --color-text-base-subtle: var(--grey-5);
  --color-text-base-placeholder: var(--grey-4);
  --color-text-base-disabled: var(--grey-3);

  --color-text-inverse-high: var(--white-alpha-10);
  --color-text-inverse-middle: var(--white-alpha-8);
  --color-text-inverse-low: var(--white-alpha-6);
  --color-text-inverse-disabled: var(--white-alpha-3);

  --color-text-primary: var(--rose-6);
  --color-text-primary-low: var(--rose-4);
  --color-text-primary-disabled: var(--rose-3);

  --color-text-danger: var(--danger);

  --color-text-success: var(--green-9);

  --color-text-info: var(--blue-9);

  --color-text-warning: var(--yellow-9);

  --color-text-interaction: var(--rose-6);

  /* border */
  --color-border-base-high: var(--grey-3);
  --color-border-base-middle: var(--black-alpha-1);
  --color-border-base-low: var(--black-alpha-0);

  --color-border-primary: var(--rose-6);

  --color-border-danger: var(--danger);

  --color-border-success: var(--green-6);

  --color-border-warning: var(--yellow-6);

  --color-border-info: var(--blue-6);

  --color-border-inverse-high: var(--white-alpha-2);
  --color-border-inverse-middle: var(--white-alpha-4);
  --color-border-inverse-low: var(--white-alpha-8);

  /**** Spacing ****/
  --spacing-1: 0.125rem; /*2px*/
  --spacing-2: 0.25rem; /*4px*/
  --spacing-3: 0.375rem; /*6px*/
  --spacing-4: 0.5rem; /*8px*/
  --spacing-5: 0.625rem; /*10px*/
  --spacing-6: 0.75rem; /*12px*/
  --spacing-7: 0.875rem; /*14px*/
  --spacing-8: 1rem; /*16px*/
  --spacing-9: 1.125rem; /*18px*/
  --spacing-10: 1.25rem; /*20px*/
  --spacing-12: 1.5rem; /*24px*/
  --spacing-14: 1.75rem; /*28px*/
  --spacing-16: 2rem; /*32px*/
  --spacing-20: 2.5rem; /*40px*/
  --spacing-24: 3rem; /*48px*/
  --spacing-28: 3.5rem; /*56px*/
  --spacing-32: 4rem; /*64px*/

  /**** Radius ****/
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 10px;
  --radius-6: 12px;
  --radius-7: 16px;
  --radius-8: 20px;
  --radius-round: 9999px;

  --rad-action-sm: var(--radius-3);
  --rad-action-md: var(--radius-4);
  --rad-action-lg: var(--radius-5);

  --rad-card-sm: var(--radius-3);
  --rad-card-md: var(--radius-4);
  --rad-card-lg: var(--radius-5);

  /**** Typography ****/
  /* FontSize */
  --font-size-1: 0.625rem; /*10px*/
  --font-size-2: 0.75rem; /*12px*/
  --font-size-3: 0.8125rem; /*13px*/
  --font-size-4: 0.875rem; /*14px*/
  --font-size-5: 0.9375rem; /*15px*/
  --font-size-6: 1rem; /*16px*/
  --font-size-7: 1.125rem; /*18px*/
  --font-size-8: 1.25rem; /*20px*/
  --font-size-9: 1.375rem; /*22px*/
  --font-size-10: 1.5rem; /*24px*/

  /* LineHeight */
  --line-height-0: 100%;
  --line-height-1: 120%;
  --line-height-2: 140%;
  --line-height-3: 150%;
  --line-height-4: 175%;
  --line-height-5: 200%;

  /**** Layout ****/
  --layout-page-sidebar: 216px;
  --layout-page-session: 400px;
  --layout-page-single: 880px;
  --layout-column-side: 320px;
  --layout-page-body: 480px;
}