/*
 * The FlashLingo design tokens, mirrored from Modules/DesignSystem in flashlingo-ios
 * (Colors.xcassets, Design.Spacing, Design.CornerRadius and the Nunito text styles).
 *
 * Keep the names and values in step with the Swift side: a colour changed there is a colour
 * changed here. Both appearances come from the asset catalog, so the site follows the system
 * appearance the same way the app does.
 */

@font-face {
    font-family: "Nunito";
    src: url("/fonts/Nunito-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/fonts/Nunito-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/fonts/Nunito-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/fonts/Nunito-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* Design.Color: semantic */
    --primary: #7e4ce6;
    --secondary: #ece4fc;
    --background-primary: #f0f0f0;
    --background-secondary: #ffffff;
    --text: #373d3f;
    --text-contrast: #ffffff;
    --text-primary: #7e4ce6;
    --error: #e74c3c;
    --warning: #f1c40f;
    --success: #2ecc71;
    --info: #3a86d3;
    --disabled-background: #e8e8e8;
    --disabled-text: #a9acad;

    /* Design.Color: grays */
    --gray0: #ffffff;
    --gray10: #e8e8e8;
    --gray20: #d3d5d5;
    --gray40: #a9acad;
    --gray60: #818586;
    --gray80: #5b6061;
    --gray90: #495154;
    --gray100: #373d3f;

    /* Design.Color: progress */
    --progress-bar-background: #35c759;

    /* Design.Color: themes, the colours a set can have */
    --theme-yellow-primary: #e6b800;
    --theme-yellow-secondary: #fff2bf;
    --theme-orange-primary: #fd8d0e;
    --theme-orange-secondary: #fee2c3;
    --theme-red-primary: #ff3b30;
    --theme-red-secondary: #ffcecb;
    --theme-pink-primary: #e74589;
    --theme-pink-secondary: #f8c8dc;
    --theme-purple-primary: #7e4ce6;
    --theme-purple-secondary: #d5caee;
    --theme-blue-primary: #007aff;
    --theme-blue-secondary: #bfdeff;
    --theme-green-primary: #34c759;
    --theme-green-secondary: #ccf2d5;

    /* Web only: derived from the colours above */
    --muted: var(--gray60);
    --divider: rgb(55 61 63 / 0.1);
    --frost: rgb(240 240 240 / 0.72);
    --shadow-alpha: 1;
    --shadow-soft: 0 6px 18px rgb(55 61 63 / calc(0.08 * var(--shadow-alpha)));
    --shadow-card: 0 18px 40px rgb(55 61 63 / calc(0.12 * var(--shadow-alpha)));
    --shadow-primary: 0 14px 32px rgb(126 76 230 / calc(0.35 * var(--shadow-alpha)));

    /* Design.Spacing */
    --s-xxs: 2px;
    --s-xs: 4px;
    --s-s: 8px;
    --s-m: 16px;
    --s-l: 24px;
    --s-xl: 32px;
    --s-xxl: 40px;

    /* Design.CornerRadius, plus larger web surfaces */
    --r-small: 4px;
    --r-normal: 8px;
    --r-double: 16px;
    --r-button: 14px;
    --r-button-small: 10px;
    --r-card: 24px;
    --r-panel: 32px;
    --r-full: 999px;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --stagger: 80ms;

    --font: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #7e4ce6;
        --secondary: #2d2347;
        --background-primary: #000000;
        --background-secondary: #1b1c1e;
        --text: #ffffff;
        --text-primary: #b89ef7;
        --disabled-background: #2c2d30;
        --disabled-text: #5b6061;
        --progress-bar-background: #30d158;

        --theme-yellow-primary: #cfa600;
        --theme-yellow-secondary: #ffe066;
        --theme-orange-primary: #ee8002;
        --theme-orange-secondary: #fdb76b;
        --theme-red-primary: #ff1e12;
        --theme-red-secondary: #ff786f;
        --theme-pink-primary: #e42a78;
        --theme-pink-secondary: #ee79a9;
        --theme-purple-primary: #6b31e2;
        --theme-purple-secondary: #a087d9;
        --theme-blue-primary: #006ee6;
        --theme-blue-secondary: #66b0ff;
        --theme-green-primary: #2fb350;
        --theme-green-secondary: #85e09a;

        --muted: var(--gray40);
        --divider: rgb(255 255 255 / 0.12);
        --frost: rgb(0 0 0 / 0.6);
        --shadow-alpha: 0.6;
    }
}