@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Playwrite+IT+Moderna:wght@100..400&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


/* ========= Toggle ========= */

.baba-tggl {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
    width: fit-content;
    padding: 0px var(--padding-lg);
    background-color: #f2f2f2;
    border-radius: 40px;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.baba-tggl .circle-left,
.baba-tggl .circle-right {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


/* ========= root css ========= */
:root {
    /* colors */
    --white: #fff;
    --black: #000;
    --gray: #333;

    /* system colors */
    --bgl: #fff;
    --color-primary: #0077B6;
    --color-primary-light: #00A0E3;
    --color-primary-dark: #005C8D;

    --color-secondary: #F2994A;
    --color-secondary-light: #F2C94C;
    --color-secondary-dark: #C85000;

    --color-neutral-100: #FFFFFF;
    --color-neutral-200: #F5F5F5;
    --color-neutral-300: #EEEEEE;
    --color-neutral-400: #E0E0E0;
    --color-neutral-500: #BDBDBD;
    --color-neutral-600: #9E9E9E;
    --color-neutral-700: #757575;
    --color-neutral-800: #424242;
    --color-neutral-900: #212121;

    --color-success: #2E7D32;
    --color-warning: #F57C00;
    --color-error: #C62828;

    /* font-size */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-21: 21px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-30: 30px;
    --fs-32: 32px;
    --fs-36: 36px;
    --fs-40: 40px;
    --fs-44: 44px;
    --fs-48: 48px;
    --fs-56: 56px;
    --fs-64: 64px;

    /* font family */
    --font-family-heading: 'Bricolage Grotesque', sans-serif;
    --font-weight-heading-regular: 400;
    --font-weight-heading-bold: 700;
    --font-style-heading-regular: normal;
    --font-style-heading-italic: italic;

    --font-family-handwriting: 'Playwrite IT Moderna', cursive;
    --font-weight-handwriting-regular: 100;
    --font-weight-handwriting-bold: 400;

    --font-family-body: 'Source Sans 3', sans-serif;
    --font-weight-body-regular: 400;
    --font-weight-body-bold: 700;
    --font-style-body-regular: normal;
    --font-style-body-italic: italic;

    /* ===== Padding ===== */
    --padding-xs: 5px;
    --padding-sm: 10px;
    --padding-md: 15px;
    --padding-lg: 20px;
    --padding-xl: 25px;

    --radius-xs: 5px;
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-xl: 25px;

}

/* dark-theme */
:root.dark-theme {
    --bgl: #1e1e1e;
    --color-primary: #4da6ff;
    --color-primary-light: #80c0ff;
    --color-primary-dark: #0077b6;

    --color-secondary: #f2c94c;
    --color-secondary-light: #f7d97a;
    --color-secondary-dark: #c85000;

    --color-neutral-100: #212121;
    --color-neutral-200: #424242;
    --color-neutral-300: #616161;
    --color-neutral-400: #757575;
    --color-neutral-500: #9e9e9e;
    --color-neutral-600: #bdbdbd;
    --color-neutral-700: #e0e0e0;
    --color-neutral-800: #eeeeee;
    --color-neutral-900: #f5f5f5;

    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
}


/* Baba Icon Resizer Machine */
.i12 {
    font-size: var(--fs-12);
}

.i14 {
    font-size: var(--fs-14);
}

.i16 {
    font-size: var(--fs-16);
}

.i18 {
    font-size: var(--fs-18);
}

.i20 {
    font-size: var(--fs-21);
}

.i24 {
    font-size: var(--fs-24);
}

.i28 {
    font-size: var(--fs-28);
}

.i32 {
    font-size: var(--fs-32);
}

.i36 {
    font-size: var(--fs-36);
}

.i40 {
    font-size: var(--fs-40);
}

.i44 {
    font-size: var(--fs-44);
}

.i48 {
    font-size: var(--fs-48);
}

.i56 {
    font-size: var(--fs-56);
}

.i64 {
    font-size: var(--fs-64);
}

/* ===== Baba Icon BG ===== */
.i-bg-primary {
    background: var(--color-primary);
    color: var(--white);
    padding: var(--padding-sm);
}

/* ===== Padding ===== */
.padding-xs {
    padding: var(--padding-xs);
}

.padding-sm {
    padding: var(--padding-sm);
}

.padding-md {
    padding: var(--padding-md);
}

.padding-lg {
    padding: var(--padding-lg);
}

.padding-xl {
    padding: var(--padding-xl);
}

/* ===== Corner Radius ===== */
.radius-xs {
    border-radius: var(--radius-xs);
}

.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading-regular);
    font-style: var(--font-style-heading-regular);
}

h1 {
    font-size: var(--fs-36);
}

h2 {
    font-size: var(--fs-30);
}

h3 {
    font-size: var(--fs-24);
}

h4 {
    font-size: var(--fs-21);
}

h5 {
    font-size: var(--fs-18);
}

h6 {
    font-size: var(--fs-15);
}

.heading-bold {
    font-weight: var(--font-weight-heading-bold);
}

.heading-italic {
    font-style: var(--font-style-heading-italic);
}

.handwriting {
    font-family: var(--font-family-handwriting);
    font-weight: var(--font-weight-handwriting-regular);
}

.handwriting-bold {
    font-weight: var(--font-weight-handwriting-bold);
}

body,
button,
input,
textarea {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body-regular);
    font-style: var(--font-style-body-regular);
    font-size: 16px;
}

.body-bold {
    font-weight: var(--font-weight-body-bold);
}

.body-italic {
    font-style: var(--font-style-body-italic);
}

button {
    font-size: 16px;
    position: relative;
    margin: auto;
    padding: 1em 2.5em 1em 2.5em;
    border: none;
    background: #fff;
    transition: all 0.1s linear;
    box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);
}

button:active {
    transform: scale(0.95);
}

button .border {
    position: absolute;
    border: 0.15em solid #fff;
    transition: all 0.3s 0.08s linear;
    top: 50%;
    left: 50%;
    width: 9em;
    height: 3em;
    transform: translate(-50%, -50%);
}

button:hover .border {
    display: block;
    width: 9.9em;
    height: 3.7em;
}

.full-rounded {
    border-radius: 2em;
}