body {
    background-color: var(--base-primary-100);
}

.container-sodon {
    width: 100%;
    padding: 0 var(--spacing-xxl);
}
:root {
    --white: #FFFFFF;
    --gradient-red: linear-gradient(180deg, #CB0D2F 0%, #FF4649 100%);
    --button-primary-color: var(--white);
    --button-primary-border: var(--button-base-primary);
    --button-primary-bg: linear-gradient(180deg, #CB0D2F 100%, #FF4649 100%);
    --button-primary-hover-bg: linear-gradient(180deg, #CB0D2F 0%, #FF4649 100%);

    --button-secondary-color: var(--white-black-100);
    --button-secondary-border-color: var(--button-base-primary);
    --button-secondary-bg: transparent;
    --button-secondary-hover-bg: #CB0D2F;
    --button-secondary-icon-color: #CB0D2F;
    --button-secondary-icon-hover-color: #FFF;

    --button-tertiary-color: var(--white-black-70);
    --button-tertiary-icon-color: var(--white-black-30);
    --button-tertiary-bg: transparent;
    --button-tertiary-hover-bg: var(--white-black-5);
}

:root,
[data-theme="light"],
[data-bs-theme="light"] {

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-xxl: 16px;
    --radius-2xxl: 24px;
    --radius-3xxxl: 32px;
    --radius-xxxl: 999px;

    /* Spacing */
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-sm: 12px;
    --spacing-ms: 16px;
    --spacing-md: 20px;
    --spacing-ld: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Stroke */
    --stroke-xxs: 0.5px;
    --stroke-xs: 1px;
    --stroke-s: 1.5px;
    --stroke-sm: 2px;
    --stroke-ms: 2.5px;
    --stroke-md: 3px;
    --stroke-ld: 4px;
    --stroke-primary: rgba(0, 0, 0, 0.12);

    /* Opacity */
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;

    /* Number */
    --number: 0;

    /* General Colors */
    --tertiary-2: #F5F5F5;
    --secondary: #434343;
    --error: #FF0000;
    --success: #43A23B;
    --primary: #F5F5F5CC;
    --tertiary: #FFFFFF;
    --pressed: #0C9DFF33;

    /* White & Black */
    --white-black-5: #0000000D;
    --white-black-10: #0000001A;
    --white-black-20: #00000033;
    --white-black-30: #0000004D;
    --white-black-40: #00000066;
    --white-black-50: #00000080;
    --white-black-60: #00000099;
    --white-black-70: #000000B2;
    --white-black-80: #000000CC;
    --white-black-90: #000000E5;
    --white-black-100: #000000;

    /* Black & White */
    --black-white-5: #FFFFFF0D;
    --black-white-10: #FFFFFF1A;
    --black-white-20: #FFFFFF33;
    --black-white-30: #FFFFFF4D;
    --black-white-40: #FFFFFF66;
    --black-white-50: #FFFFFF80;
    --black-white-60: #FFFFFF99;
    --black-white-70: #FFFFFFB2;
    --black-white-80: #FFFFFFCC;
    --black-white-90: #FFFFFFE5;
    --black-white-100: #FFFFFF;

    /* Base Tertiary */
    --base-tertiary: #0C9DFFB2;

    /* Base Primary */
    --base-primary-5: #F5F5F50D;
    --base-primary-10: #F5F5F51A;
    --base-primary-20: #F5F5F533;
    --base-primary-30: #F5F5F54D;
    --base-primary-40: #F5F5F566;
    --base-primary-50: #F5F5F580;
    --base-primary-60: #F5F5F599;
    --base-primary-70: #F5F5F5B2;
    --base-primary-80: #F5F5F5CC;
    --base-primary-90: #F5F5F5E5;
    --base-primary-100: #E4EBE4;

    /* Base Secondary */
    --base-secondary-5: #FFFFFF0D;
    --base-secondary-10: #FFFFFF1A;
    --base-secondary-20: #FFFFFF33;
    --base-secondary-30: #FFFFFF4D;
    --base-secondary-40: #FFFFFF66;
    --base-secondary-50: #FFFFFF80;
    --base-secondary-60: #FFFFFF99;
    --base-secondary-70: #FFFFFFB2;
    --base-secondary-80: #FFFFFFCC;
    --base-secondary-90: #FFFFFFE5;
    --base-secondary-100: #FFFFFF;

    /* Content */
    --content-bg: #EEF3EF;
    --content-bg-hover: #FFFFFF;
    --content-stroke: #FFFFFF;
    --content-box-bg: #0000000D;

    /* Header */
    --header-bottom-stroke: #FFFFFF80;

    /* Surface */
    --surface-icon: #0071BD;
    --surface-logo: #CB0D2F;

    /* Button */
    --button-icon-primary: #CB0D2F;
    --button-icon-secondary: #CCCCCC;
    --button-base-primary: #CB0D2F;
    --button-base-secondary: #CB0D2F1A;

    /* Sodon */
    --sodon-5: #CB0D2F0D;
    --sodon-10: #CB0D2F1A;
    --sodon-20: #CB0D2F33;
    --sodon-30: #CB0D2F4D;
    --sodon-40: #CB0D2F66;
    --sodon-50: #CB0D2F80;
    --sodon-60: #CB0D2F99;
    --sodon-70: #CB0D2FB2;
    --sodon-80: #CB0D2FCC;
    --sodon-90: #CB0D2FE5;
    --sodon-100: #CB0D2F;
}

[data-theme="dark"],
[data-bs-theme="dark"] {
    --gradient-red: linear-gradient(180deg, #CB0D2F 0%, #FF4649 100%);
    --stroke-primary: rgba(255, 255, 255, 0.12);
    /* General Colors */
    --tertiary-2: #1F2020;
    --secondary: #FFFFFFB2;
    --error: #FF4242;
    --success: #00FF00;
    --primary: #1F2020CC;
    --tertiary: #37383A;
    --pressed: #00000066;

    /* White & Black */
    --white-black-5: #FFFFFF0D;
    --white-black-10: #FFFFFF1A;
    --white-black-20: #FFFFFF33;
    --white-black-30: #FFFFFF4D;
    --white-black-40: #FFFFFF66;
    --white-black-50: #FFFFFF80;
    --white-black-60: #FFFFFF99;
    --white-black-70: #FFFFFFB2;
    --white-black-80: #FFFFFFCC;
    --white-black-90: #FFFFFFE5;
    --white-black-100: #FFFFFF;

    /* Black & White */
    --black-white-5: #0000000D;
    --black-white-10: #0000001A;
    --black-white-20: #00000033;
    --black-white-30: #0000004D;
    --black-white-40: #00000066;
    --black-white-50: #00000080;
    --black-white-60: #00000099;
    --black-white-70: #000000B2;
    --black-white-80: #000000CC;
    --black-white-90: #000000E5;
    --black-white-100: #000000;

    /* Base Tertiary */
    --base-tertiary: #0C9DFFB2;

    /* Base Primary */
    --base-primary-5: #1F20200D;
    --base-primary-10: #1F20201A;
    --base-primary-20: #1F202033;
    --base-primary-30: #1F20204D;
    --base-primary-40: #1F202066;
    --base-primary-50: #1F202080;
    --base-primary-60: #1F202099;
    --base-primary-70: #1F2020B2;
    --base-primary-80: #1F2020CC;
    --base-primary-90: #1F2020E5;
    --base-primary-100: #1F2020;

    /* Base Secondary */
    --base-secondary-5: #2A2A2A0D;
    --base-secondary-10: #2A2A2A1A;
    --base-secondary-20: #2A2A2A33;
    --base-secondary-30: #2A2A2A4D;
    --base-secondary-40: #2A2A2A66;
    --base-secondary-50: #2A2A2A80;
    --base-secondary-60: #2A2A2A99;
    --base-secondary-70: #2A2A2AB2;
    --base-secondary-80: #2A2A2ACC;
    --base-secondary-90: #2A2A2AE5;
    --base-secondary-100: #2A2A2A;

    /* Content */
    --content-bg: #2A2A2A;
    --content-bg-hover: #303030;
    --content-stroke: #FFFFFF0D;
    --content-box-bg: #0000001A;

    /* Header */
    --header-bottom-stroke: #FFFFFF0D;

    /* Surface */
    --surface-icon: #0C9DFF;
    --surface-logo: #FFFFFF;

    /* Button */
    --button-icon-primary: #FFFFFF;
    --button-icon-secondary: #666666;
    --button-base-primary: #CB0D2F;
    --button-base-secondary: #FFFFFF1A;

    /* Sodon */
    --sodon-5: #CE2D410D;
    --sodon-10: #CE2D411A;
    --sodon-20: #CE2D4133;
    --sodon-30: #CE2D414D;
    --sodon-40: #CE2D4166;
    --sodon-50: #CE2D4180;
    --sodon-60: #CE2D4199;
    --sodon-70: #CE2D41B2;
    --sodon-80: #CE2D41CC;
    --sodon-90: #CE2D41E5;
    --sodon-100: #CE2D41;
}