@layer foundations {
    :root {
        /* Primitive Colors（純粋な色の値のみ） */
        --colors-relux-50: #F3F8FD;
        --colors-relux-400: #899AD6;
        --colors-relux-500: #4F68C2;
        --colors-relux-800: #0F0A64;
        --colors-yellow-50: #FFFDDF;
        --colors-yellow-400: #FEE661;
        --colors-yellow-500: #FF9123;
        --colors-orange-50: #FFF5EF;
        --colors-orange-800: #EB5505;
        --colors-violet-100: #CFCEDF;
        --colors-violet-500: #554B98;
        --colors-gray-50: #F5F5F5;
        --colors-gray-100: #EBEBEB;
        --colors-gray-300: #C6C6C6;
        --colors-gray-400: #B3B3B3;
        --colors-gray-500: #757575;
        --colors-gray-700: #333333;
        --colors-special-black: #000000;
        --colors-special-white: #FFFFFF;
        --colors-blue-500: #0066CC;
        --colors-gold-500: #D9B255;
        --colors-red-500: #FF503E;
        --colors-red-700: #CE0000;

        /* Semantic Colors（色の利用用途や役割を示すもの） */
        --semantic-relux-brand-background: var(--colors-relux-50);
        --semantic-relux-brand-border: var(--colors-relux-400);
        --semantic-relux-dp-primary: var(--colors-relux-500);
        --semantic-relux-brand-primary: var(--colors-relux-800);
        --semantic-ponta-background: var(--colors-yellow-50);
        --semantic-ponta-accent-yellow: var(--colors-yellow-400);
        --semantic-ponta-main: var(--colors-yellow-500);
        --semantic-au-background: var(--colors-orange-50);
        --semantic-au-main: var(--colors-orange-800);
        --semantic-brand-inactive: var(--colors-violet-100);
        --semantic-brand-hover: var(--colors-violet-500);
        --semantic-sub-background: var(--colors-gray-50);
        --semantic-primary-background: var(--colors-gray-100);
        --semantic-primary-border: var(--colors-gray-300);
        --semantic-disabled-text: var(--colors-gray-400);
        --semantic-caption: var(--colors-gray-500);
        --semantic-primary-text: var(--colors-gray-700);
        --semantic-secondary-text: var(--colors-special-black);
        --semantic-base-background: var(--colors-special-white);
        --semantic-text-link: var(--colors-blue-500);
        --semantic-accent-gold: var(--colors-gold-500);
        --semantic-accent-red: var(--colors-red-500);
        --semantic-error: var(--colors-red-700);
    }
}