:root {
  /* colors */
  --color-transparent: transparent;
  --color-yellow: #ed9f28;
  --color-yellow-2: #f6c556;
  --color-yellow-3: #ffdc77;
  --color-yellow-tint: #ffd36b;
  --color-light-yellow: #fffae8;
  --color-paypal-yellow: #ffc43a;
  --color-green: #7d7f45;
  --color-green-2: #a2ba38;
  --color-green-3: #3eb1c8;
  --color-green-tint: #b4bf71;
  --color-light-green: #32bf00;
  --color-pink: #ff8963;
  --color-pink-tint: #ffcbbd;
  --color-red: #800024;
  --color-red-2: #d4001a;
  --color-red-3: #ee6060;
  --color-red-4: #e0495b;
  --color-red-5: #cc0000;
  --color-light-red: #feeeee;
  --color-red-tint: #c44749;
  --color-blue: #10408e;
  --color-mercari-blue: #5356ee;
  --color-mercari-medium-blue: #658eff;
  --color-blue-1: #f3f3fe;
  --color-blue-2: #dfe2ff;
  --color-blue-3: #9fa8fa;
  --color-blue-4: #3a4cea;
  --color-blue-5: #252b60;
  --color-blue-6: #41a7f7;
  --color-blue-7: #031749;
  --color-blue-8: #c9cefa;
  --color-blue-9: #000066;
  --color-blue-tint: #87a7ff;
  --color-light-blue: #e6ebfe;
  --color-light-blue-2: #d3d7fd;
  --color-alpha-mercari-blue: rgba(83, 86, 238, 0.2);
  --color-alpha-mercari-blue-5: rgba(83, 86, 238, 0.05);
  --color-alpha-mercari-blue-10: rgba(83, 86, 238, 0.1);
  --color-teal: #7298a5;
  --color-lavender: #f2f3fe;
  --color-white: #ffffff;
  --color-white-2: #f4f3f5;
  --color-white-3: #edeffd;
  --color-black: #000000;
  --color-black-2: #525252;
  --color-black-3: #0b0b0b;
  --color-black-4: #434343;
  --color-alpha-black-15: rgba(0, 0, 0, 0.15);
  --color-alpha-black-30: rgba(0, 0, 0, 0.3);
  --color-alpha-black-40: rgba(0, 0, 0, 0.4);
  --color-alpha-black-60: rgba(0, 0, 0, 0.6);
  --color-alpha-black-70: rgba(0, 0, 0, 0.7);
  --color-alpha-grey-28: rgba(76, 76, 76, 0.28);
  --color-alpha-grey-60: rgba(76, 76, 76, 0.6);
  --color-alpha-grey-80: rgba(76, 76, 76, 0.8);
  --color-alpha-red: rgba(229, 42, 48, 0.11);
  --color-alpha-green: rgba(217, 227, 70, 0.1);
  --color-grey-1: #f5f5f6;
  --color-grey-2: #ecedf1;
  --color-grey-3: #cdced2;
  --color-grey-4: #222222;
  --color-grey-5: #6b6b6b;
  --color-grey-6: #e5e5e5;
  --color-grey-7: #a6a6a6;
  --color-grey-8: #4f4f4f;
  --color-grey-9: #6b6b6b;
  --color-light-grey: #f4f3f5;
  --color-light-grey-2: #c6c7cc;
  --color-light-grey-3: #e9eaef;
  --color-light-grey-4: #f2f3fe;
  --color-orange: #f67900;
  --color-orange-2: #f47900;
  --color-light-orange: #fff1e5;
  --color-alpha-orange: rgba(252, 221, 184, 0.2);
  --color-alpha-orange-80: rgba(246, 121, 0, 0.8);
  --color-light-brown: rgba(218, 139, 93, 0.2);
  --color-pink: #f67b68;
  --color-pink-2: #f18195;
  --color-light-pink: #fee9e6;
  --color-light-pink-2: #faeaed;
  --color-paypal: #ffc439;
  --color-paypal-black: #2c2e2f;
  --color-facebook: #1877F2;
  --color-halloween-purple: #c7a8ef;
  --color-beige: #f3f1ed;

  /* digital goods colors */
  --color-digital-gray-1: #29303c;
  --color-digital-gray-2: #323a49;
  --color-digital-gray-3: #434c5e;
  --color-digital-gray-4: #5f697d;
  --color-digital-gray-5: #9faac2;
  --color-digital-gray-6: #e6e7e9;
  --color-digital-gray-7: #f2f4f7;
  --color-digital-gray-8: #2d3138;
  --color-digital-red-1: #e83f53;
  --color-digital-home-hero-bg: #4b40b8;
  --color-digital-blue-gradient: linear-gradient(
    90deg,
    #5e6ef2 -0.17%,
    #8453f2 99.98%
  );

  /* button hover colors */
  --hover-mercari-blue: #6b79f3;
  --hover-mercari-blue-2: #7884f4;
  --hover-grey: #e3e4e7;
  --hover-light-grey: #f9f9fe;
  --hover-white: #f5f5f5;
  --hover-dark: rgba(255, 255, 255, 0.04);
  --hover-light-grey-2: #f2f3fe;
  --hover-orange: #f68e29;
  --hover-paypal: #ffd269;
  --hover-plain: #929cf6;
  --hover-facebook: #1569d5;

  /* button focus colors */
  --focus-facebook: #1569d5;

  --hover-underlay: rgba(205, 206, 210, 0.2); /* #CDCED2 0.2 */
  /* font-size */

  /* 10px */
  /* Text0 */
  --text-xxs: 0.625rem;

  /* 12px */
  /* Text1 */
  --text-xs: 0.75rem;

  /* 14px */
  /* Text2 */
  --text-sm: 0.875rem;

  /* 16px */
  /* Text3 */
  --text-base: 1rem;

  /* 18px */
  /* Text4 */
  --text-lg: 1.125rem;

  /* 20px */
  /* Text5 */
  --text-xl: 1.25rem;

  /* 24px */
  /* Text6 */
  --text-2xl: 1.5rem;

  /* 30px */
  /* Text7 */
  --text-3xl: 1.875rem;

  /* 36px */
  /* Text8 */
  --text-4xl: 2.25rem;

  /* 48px */
  /* Text9 */
  --text-5xl: 3rem;

  /* design-system */
  --type-h0: 32px;
  --type-h1: 26px;
  --type-h2: 22px;
  --type-h3: 20px;
  --type-h4: 18px;
  --type-h5: 16px;
  --type-h6: 14px;
  --type-h7: 12px;
  --type-lg: 18px;
  --type-reg: 16px;
  --type-sm: 14px;
  --type-xs: 12px;
  --type-micro: 10px;

  /* font weight */
  /* --font-hairline: 100; */
  /* --font-extralight: 200; */
  --font-light: 300;
  --font-normal: 400;
  /* --font-medium: 500; */
  --font-semibold: 600;
  --font-bold: 700;
  /* --font-extrabold: 800; */
  --font-black: 900;

  /* line height */
  --leading-none: 1;
  /* --leading-tight: 1.25; */
  --leading-normal: 1.5;
  --leading-loose: 2;

  /* Letter Spacing */
  /* --tracking-tight: -0.05em; */
  --tracking-normal: 0;
  /* --tracking-wide: 0.05em; */

  /* Spacing */
  --space-px: 1px;
  --space-0: 0;
  /* 4px */
  --space-1: 0.25rem;
  /* 8px */
  --space-2: 0.5rem;
  /* 12px */
  --space-3: 0.75rem;
  /* 16px */
  --space-4: 1rem;
  /* 20px */
  --space-5: 1.25rem;
  /* 24px */
  --space-6: 1.5rem;
  /* 28px */
  --space-7: 1.75rem;
  /* 32px */
  --space-8: 2rem;
  /* 36px */
  --space-9: 2.25rem;
  /* 40px */
  --space-10: 2.5rem;
  /* 44px */
  --space-11: 2.75rem;
  /* 48px */
  --space-12: 3rem;
  /* 52px */
  --space-13: 3.25rem;
  /* 56px */
  --space-14: 3.5rem;
  /* 60px */
  --space-15: 3.75rem;
  /* 64px */
  --space-16: 4rem;
  /* 68px */
  --space-17: 4.25rem;
  /* 72px */
  --space-18: 4.5rem;
  /* 76px */
  --space-19: 4.75rem;
  /* 80px */
  --space-20: 5rem;

  /* Border */
  --border-default: 1px;
  --border-0: 0;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;
  --border-16: 16px;
  --border-20: 20px;

  /* Border Radius */
  --round-none: 0;
  --round-sm: 0.125rem;
  --round-default: 0.25rem;
  --round-lg: 0.5rem;
  --round-full: 9999px;

  /* zindex */

  /* Keep in order of what layer elements appear on page */

  /* zindex helpers */
  --zindex-hidden: -10;
  --zindex-behind: -1;

  /* Positioning layers */
  --zindex-layer-1: 5;
  --zindex-layer-2: 10;
  --zindex-layer-3: 15;

  /* Components */
  --zindex-dropdown: 30;

  --zindex-with-sticky: 50;

  --zindex-side-screen-modal-overlay: 350;
  --zindex-side-screen-modal: 500;

  --zindex-mobile-sticky-header: 999;
  --zindex-mobile-context-header: 1000;

  --zindex-desktop-sticky-header: 999;

  --zindex-meganav: 999;
  --zindex-nav-dropdown: 1000;

  --zindex-offlinebar: 999;
  --zindex-mobile-appbar: 1000;

  --zindex-loader-wrapper: 999;
  --zindex-loader-icon: 1000;

  /* Filter Modal (Mobile) */
  --zindex-refine-modal: 1100;
  --zindex-refine-header: 1150;
  --zindex-refine-footer: 1150;

  /* Modal */
  --zindex-modal-overlay: 1100;
  --zindex-modal: 1150;
  --zindex-modal-footer-button: 1160;

  /* Mobile Sidebar */
  --zindex-sidebar: 9999;
}