:root {
    --background: #ffffff;
    --foreground: #000000;
    --surface: #fafaf8;

    --primary: #1c2041;
    --primary-foreground: #ffffff;

    --accent: #dbf833;
    --accent-foreground: #1c2041;

    --secondary: #f7f7f5;
    --secondary-foreground: #1c2041;

    --muted: #f7f7f5;
    --muted-foreground: #74747d;

    --border: #dfdfda;

    --container-width: 1240px;
    --page-padding: 24px;
    --header-height: 64px;

    --radius: 12px;
    --radius-pill: 999px;


    /* Typography */

    --font-title: 56px;
    --font-subtitle: 18px;
    --font-text: 16px;
    --font-small: 14px;
}


@media (max-width: 767px) {

    :root {
        --font-title: 30px;
        --font-subtitle: 17px;
        --font-text: 15px;
        --font-small: 13px;
    }

}


@media (max-width: 640px) {

    :root {
        --page-padding: 20px;
    }

}