@font-face {
    font-family: "Nunito";
    src: url("./fonts/Nunito/Nunito-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("./fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Fredoka";
    src: url("./fonts/Fredoka/Fredoka-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 300 700;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Quicksand";
    src: url("./fonts/Quicksand/Quicksand-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sour Gummy";
    src: url("./fonts/SourGummy/SourGummy-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 100% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sour Gummy";
    src: url("./fonts/SourGummy/SourGummy-Italic-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 100% 125%;
    font-style: italic;
    font-display: swap;
}

:root{
    /* Colors */

    --divider: linear-gradient(90deg, #A78BFA 0%, #60A5FA 50%, rgba(0, 0, 0, 0.00) 100%);
    --purple: #a78bfa;
    --purple-soft: #ede9fe;
    --success: #34d399;
    --success-soft: #DCFCE7;
    --danger-soft: rgba(244, 63, 94, 0.28);
    --info-soft: rgb(59, 130, 246, 0.28);
    --warning-soft: rgba(245, 158, 11, 0.28);
    --primary-bg: #F8F7FF;
    --white: #ffffff;
    --primary: #A78BFA;
    --primary-strong: #8B5CF6;
    --primary-subtle: #EDE9FE;
    --warning: #F8BD4F;
    --warning-strong: #F59E0B;
    --info: #60A5FA;
    --danger: #FB7185;
    --warning-subtle: #FFF4CC;
    --teal: #2dd4bf;
    --teal-strong: #14b8a6;
    --teal-soft: #ccfbf1;
    --teal-mint-strong: #0F766E;
    --teal-mint-soft: #CCFBF1;
    --teal-mint-surface: #E8EDF2;
    --text-color-default: #1e293b;
    --text-color-muted: #64748b;
    --text-color-soft: #94a3b8;
    --border-color: rgba(30, 41, 59, 0.14);
    --shadow-color-soft: rgba(30, 41, 59, 0.06);

    /* Cyan */
    --accent: #22D3EE;
    --accent-strong: #06B6D4;
    --accent-soft: rgba(6, 182, 212, 0.28);
    --accent-surface: #CFFAFE;
    
    --radius-sm: 0.875rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2.25rem;
    --radius-pill: 62.4375rem;
    
    /* Surfaces and shadows */
    --surface-2: #fcecd4;
    --shadow-color: rgba(30, 41, 59, 0.12);

    /* Motion */
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Typography */

    /* Fonts */

    --title-font: "Sour Gummy", "Comic Neue", ui-rounded, system-ui, sans-serif;
    --display-font: "Fredoka", "Sour Gummy", sans-serif;
    --text-font: "Quicksand", "Nunito", sans-serif;
    --number-font: "Nunito", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Type scale (rem) */
    
    --text-2xs: 0.76rem;
    --text-xs: 0.875rem;
    --text-sm: 1rem;
    --text-md: 1.0625rem;
    --text-base: 1.125rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.25rem;
    --text-xxl: 1.5rem;
    --text-display: 2.25rem;
    --text-panel-title: 1.375rem;
    --text-detail: 0.9375rem;
    --text-overline: 0.6875rem;

    /* Spacing */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;

    --danger-strong: #BE123C;
    --danger-surface: #FFE4E6;
    --detail-surface: #f8fbff;
    --info-strong: #3B82F6;
    --info-surface: #DBEAFE;
    --new-bg-gradient: linear-gradient(to right, #ede9fe, #efecfe, #f1efff, #f3f1ff, #f5f4ff, #f4f4ff, #f3f3ff, #f2f3ff, #edf1ff, #e8eeff, #e2ecfe, #dbeafe);
    --primary-soft: rgb(139, 92, 246, 0.28);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
    --success-strong: #10B981;
    --surface: #F4F5F8;
    --warning-surface: #FFEDD5;
    --z-dialog: 1400;
    --z-side-panel: 1300;
}