:root {
    --global-radius: 8px;
    --small-radius: 4px;
    --medium-radius: 8px;
    --large-radius: 16px;
    --color-primary: #cb2d58;
    --color-primary-light: #ff6484;
    --color-primary-dark: #94002f;
    --color-secondary: #19bfd3;
    --color-secondary-light: #61ddf9;
    --color-secondary-dark: #008eb2;
    --color-text-error: #b2001a;
    --color-text-success: #2e7b32;
    --color-object-error: #d32f2f;
    --color-object-success: #4caf50;
    --color-object-caution: #f9a825;
    --color-neutral-000: #fff;
    --color-neutral-100: #f0f0f1;
    --color-neutral-200: #e0e0e2;
    --color-neutral-300: #c0c2c5;
    --color-neutral-400: #a1a3a8;
    --color-neutral-500: #81858b;
    --color-neutral-600: #62666d;
    --color-neutral-700: #424750;
    --color-neutral-800: #232933;
    --color-neutral-900: #0c0c0c;
}
/* fonts */
@font-face {
    font-family: 'HarmonyOS';
    src: url('../fonts/HarmonyOS_Sans.woff2');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'HarmonyOS';
    src: url('../fonts/HarmonyOS_Sans_Bold.woff2');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}
/* utilities */
    .color-primary { color: #cb2d58 !important; }
    .color-secondary { color: #3a9ecb !important; }
    .text-muted { color: #6c757d !important; }
    .text-danger { color: #dc3545 !important; }
    .text-success { color: #28a745 !important; }

    .border { border: 1px solid #e0e0e2 !important; }
    .rounded-sm { border-radius: 4px !important;}
    .rounded { border-radius: 8px !important; }
    .rounded-lg { border-radius: 16px !important; }
    .rounded-pill { border-radius: 50rem !important; }
    .cursor-pointer { cursor: pointer; }

    .text-left { text-align: left !important; }
    .text-center { text-align: center !important; }
    .text-right { text-align: right !important; }

    .font-weight-light { font-weight: 300 !important; }
    .font-weight-normal { font-weight: 400 !important; }
    .font-weight-bold { font-weight: 700 !important; }

    .m-1 { margin: .25rem !important; }
    .m-2 { margin: .5rem !important; }
    .m-3 { margin: 1rem !important; }
    .m-4 { margin: 1.5rem !important; }

    .mt-1, .my-1 { margin-top: .25rem !important; }
    .mt-2, .my-2 { margin-top: .5rem !important; }
    .mt-3, .my-3 { margin-top: 1rem !important; }
    .mt-4, .my-4 { margin-top: 1.5rem !important; }

    .mr-1, .mx-1 { margin-right: .25rem !important; }
    .mr-2, .mx-2 { margin-right: .5rem !important; }
    .mr-3, .mx-3 { margin-right: 1rem !important; }
    .mr-4, .mx-4 { margin-right: 1.5rem !important; }

    .mb-1, .my-1 { margin-bottom: .25rem !important; }
    .mb-2, .my-2 { margin-bottom: .5rem !important; }
    .mb-3, .my-3 { margin-bottom: 1rem !important; }
    .mb-4, .my-4 { margin-bottom: 1.5rem !important; }

    .ml-1, .mx-1 { margin-left: .25rem !important; }
    .ml-2, .mx-2 { margin-left: .5rem !important; }
    .ml-3, .mx-3 { margin-left: 1rem !important; }
    .ml-4, .mx-4 { margin-left: 1.5rem !important; }

    .m-auto { margin: auto !important; }
    .mt-auto, .my-auto { margin-top: auto !important; }
    .mr-auto, .mx-auto { margin-right: auto !important; }
    .mb-auto, .my-auto { margin-bottom: auto !important; }
    .ml-auto, .mx-auto { margin-left: auto !important; }

    .p-1 { padding: .25rem !important; }
    .p-2 { padding: .5rem !important; }
    .p-3 { padding: 1rem !important; }
    .p-4 { padding: 1.5rem !important; }

    .pt-1, .py-1 { padding-top: .25rem !important; }
    .pt-2, .py-2 { padding-top: .5rem !important; }
    .pt-3, .py-3 { padding-top: 1rem !important; }
    .pt-4, .py-4 { padding-top: 1.5rem !important; }

    .pr-1, .px-1 { padding-right: .25rem !important; }
    .pr-2, .px-2 { padding-right: .5rem !important; }
    .pr-3, .px-3 { padding-right: 1rem !important; }
    .pr-4, .px-4 { padding-right: 1.5rem !important; }

    .pb-1, .py-1 { padding-bottom: .25rem !important; }
    .pb-2, .py-2 { padding-bottom: .5rem !important; }
    .pb-3, .py-3 { padding-bottom: 1rem !important; }
    .pb-4, .py-4 { padding-bottom: 1.5rem !important; }

    .pl-1, .px-1 { padding-left: .25rem !important; }
    .pl-2, .px-2 { padding-left: .5rem !important; }
    .pl-3, .px-3 { padding-left: 1rem !important; }
    .pl-4, .px-4 { padding-left: 1.5rem !important; }