@layer global {
  :root {
    --blog-color-gray-0: #ffffff;
    --blog-color-gray-50: #fff6ec;
    --blog-color-gray-100: #f5f5f5;
    --blog-color-gray-150: #ebebeb;
    --blog-color-gray-200: #d1d2d5;
    --blog-color-gray-300: #d8d8d8;
    --blog-color-gray-500: #a4a4a4;
    --blog-color-gray-600: #808085;
    --blog-color-gray-900: #2b2b33;

    --blog-color-black-200: #434343;
    --blog-color-black-900: #000000;

    --blog-color-mango-50: #fdf9f3;
    --blog-color-mango-400: #efce9d;

    --blog-color-yellow-500: #fadb36;

    --blog-color-blue-500: #0e78da;
    --blog-color-blue-700: #303c69;
    --blog-color-blue-900: #0e1a46;

    --blog-color-primary: var(--blog-color-gray-900);
    --blog-color-secondary: var(--blog-color-gray-600);
    --blog-color-white: var(--blog-color-gray-0);
    --blog-color-black: var(--blog-color-black-900);
  }
}