// font

@font-level-1: rgba(56, 56, 56, 1);
@font-level-2: rgba(128, 128, 128, 1);
@font-level-3: rgba(166, 166, 166, 1);

@font-reverse-1: rgba(255, 255, 255, 1);
@font-reverse-2: rgba(255, 255, 255, 0.8);

// icon
@icon-level-1: rgba(166, 166, 166, 1);
@icon-reverse-1: rgba(255, 255, 255, 0.8);

// background

@gray-bg-level-1: rgba(247, 247, 247, 1);
@gray-bg-level-2: rgba(238, 238, 238, 0.2);

// shadow

@shadow-level-1: rgba(0, 0, 0, 0.3);
@shadow-level-2: rgba(0, 0, 0, 0.2);

// border

@border-level-1: rgba(217, 217, 217, 1);
@border-level-2: rgb(238, 238, 238);

// theme
@theme-blueberry: hsl(231, 44%, 56%);
@theme-grape: hsl(291, 50%, 39%);
@theme-ink: hsl(0, 0%, 26%);
@theme-mint: hsl(174, 100%, 29%);
@theme-ocean: hsl(210, 79%, 46%);
@theme-tea: hsl(146, 46%, 41%);

// hint
@notice-level-1: rgb(255, 112, 67);