@layer tokens {
  :root {
    --color-black-100: #000;
    --color-black-90: rgb(0 0 0 / 90%);
    --color-gray-100: #fff;
    --color-gray-90: #f9f9f9;
    --color-gray-80: #efefef;
    --color-gray-70: #ccc;
    --color-gray-60: #aaa;
    --color-gray-50: #999;
    --color-gray-40: #797979;
    --color-gray-30: #626262;
    --color-gray-20: #4c4c4c;
    --color-gray-10: #222;
    --color-gray-5: #111;
    --color-red-95: #fcebee;
    --color-red-90: #fae6ea;
    --color-red-80: #eccad1;
    --color-red-70: #e5a6b2;
    --color-red-60: #db8294;
    --color-red-50: #ca596e;
    --color-red-40: #b82f49;
    --color-red-30: #a70524;
    --color-red-25: #8a0720;
    --color-red-20: #86041d;
    --color-red-10: #640316;
    --color-red-5: #43020e;
    --color-primary-90: var(--color-red-90);
    --color-primary-80: var(--color-red-80);
    --color-primary-70: var(--color-red-70);
    --color-primary-60: var(--color-red-60);
    --color-primary-50: var(--color-red-50);
    --color-primary-40: var(--color-red-40);
    --color-primary-30: var(--color-red-30);
    --color-primary-20: var(--color-red-20);
    --color-primary-10: var(--color-red-10);
    --color-primary-5: var(--color-red-5);
    --color-neutral-100: var(--color-gray-100);
    --color-neutral-90: var(--color-gray-90);
    --color-neutral-80: var(--color-gray-80);
    --color-neutral-70: var(--color-gray-70);
    --color-neutral-60: var(--color-gray-60);
    --color-neutral-50: var(--color-gray-50);
    --color-neutral-40: var(--color-gray-40);
    --color-neutral-30: var(--color-gray-30);
    --color-neutral-20: var(--color-gray-20);
    --color-neutral-10: var(--color-gray-10);
    --color-neutral-5: var(--color-gray-5);
    --color-category-blue: var(--color-blue-30);
    --color-category-green: var(--color-green-30);
    --color-category-purple: var(--color-purple-30);
    --color-blue-30: #0564a7;
    --color-green-30: #1e8e38;
    --color-purple-30: #83408a;
    --color-text-black: var(--color-black-100);
    --color-text-default: var(--color-neutral-5);
    --color-text-subtle: var(--color-neutral-40);
    --color-fill-default: var(--color-neutral-100);
    --color-fill-subtle: var(--color-neutral-80);
    --color-fill-dark: var(--color-neutral-10);
    --color-stroke-default: var(--color-gray-75);
    --color-stroke-dark: var(--color-gray-20);
    --color-stroke-brandsubtle: var(--color-primary-50);
    --color-text-brand: var(--color-primary-30);
    --color-fill-brand: var(--color-primary-30);
    --color-tag-blue: var(--color-blue-30);
    --color-tag-green: var(--color-green-30);
    --color-tag-purple: var(--color-purple-30);
    --color-text-light: var(--color-neutral-100);
    --color-fill-subtler: var(--color-neutral-80);
    --color-stroke-light: var(--color-gray-100);
    --color-stroke-subtler: var(--color-gray-50);
    --color-stroke-brand: var(--color-primary-30);
    --color-stroke-subtle: var(--color-gray-70);
    --color-stroke-subtle-2: var(--color-gray-50);
    --color-bluegreen-30: #39809c;
    --color-brown-30: #866431;
    --color-tag-bluegreen: var(--color-bluegreen-30);
    --color-tag-brown: var(--color-brown-30);
    --color-category-bluegreen: var(--color-bluegreen-30);
    --color-category-brown: var(--color-brown-30);
    --color-blue-30-2: #0564a7;
    --color-text-danger: #d00;
    --color-gray-75: #e0e0e0;
    --color-voice-green: #d1eace;
    --color-voice-blue: #d1e6f6;
    --color-voice-purple: #eeddf1;
    --color-voice-pink-01: #fbe0e5;
    --color-voice-pink-02: #f9d8eb;
    --color-voice-blue-02: #c4eaef;
    --color-voice-yellow-01: #f4ebdd;
    --color-voice-yellow-02: #ffdf87;
  }
}

@layer tokens {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --second-family: "Rajdhani", sans-serif;
    --font-noto-serif: "Noto Serif JP", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer tokens {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1210px;
    --max-width-lg: 870px;
  }
}