/*
 * The uncover design tokens, mirrored from UncoverKit/Sources/DesignSystem/Tokens in uncover-ios.
 *
 * Keep the names and values in step with the Swift side: a colour changed there is a colour changed
 * here. Light is the designed column; dark is the one UncoverColor derives, so the site follows the
 * system appearance the same way the app does.
 */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/BricolageGrotesque.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("/fonts/DMSans.woff2") format("woff2");
    font-weight: 100 1000;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* UncoverColor */
    --ink: #1e2124;
    --ink-2: #1f2225;
    --muted: #7a8087;
    --muted-2: #9aa0a6;
    --disabled: #b6bbc0;
    --divider: #e2e5e8;
    --soft: #e9ebee;
    --surface-app: #f4f5f6;
    --surface-card: #ffffff;
    --ink-fixed: #1e2124;
    --text-on-ink: #ffffff;
    --tint-amber-bg: #ffe7c2;
    --tint-amber-fg: #9a6a1e;
    --tint-green-bg: #ddf0e8;
    --tint-green-fg: #2f7a60;
    --ios-blue: #0a84ff;
    --glass: rgb(255 255 255 / 0.6);
    --glass-border: rgb(255 255 255 / 0.9);
    --glass-strong: rgb(255 255 255 / 0.9);
    --frost: rgb(255 255 255 / 0.55);
    --dash: rgb(30 33 36 / 0.3);

    /* UncoverGradient: top-leading to bottom-trailing */
    --g-sunset: linear-gradient(135deg, #f2b69b, #c86b5a);
    --g-ocean: linear-gradient(135deg, #8fb7d9, #3f6e9a);
    --g-peach: linear-gradient(135deg, #f6d3a6, #d99a5b);
    --g-grape: linear-gradient(135deg, #b9a7e6, #6e5bb8);
    --g-mint: linear-gradient(135deg, #a9d9c6, #4e9a80);
    --g-berry: linear-gradient(135deg, #e3a5c0, #9b4f78);
    --g-gold: linear-gradient(135deg, #ead08f, #b89540);
    --g-sky: linear-gradient(135deg, #bfd8ee, #6a9bc4);

    /* UncoverShadow: CSS blur, as designed; opacity halves in dark */
    --shadow-alpha: 1;
    --shadow-soft: 0 8px 20px rgb(20 22 26 / calc(0.1 * var(--shadow-alpha)));
    --shadow-card: 0 16px 40px rgb(20 22 26 / calc(0.12 * var(--shadow-alpha)));
    --shadow-float: 0 24px 50px rgb(20 22 26 / calc(0.18 * var(--shadow-alpha)));
    --shadow-hero: 0 30px 60px rgb(20 22 26 / calc(0.1 * var(--shadow-alpha)));
    --shadow-primary: 0 14px 30px rgb(30 33 36 / calc(0.28 * var(--shadow-alpha)));
    --shadow-ink-disc: 0 20px 50px rgb(30 33 36 / calc(0.4 * var(--shadow-alpha)));

    /* UncoverRadius */
    --r-label: 12px;
    --r-chip: 14px;
    --r-input: 16px;
    --r-row: 18px;
    --r-panel: 20px;
    --r-tile: 22px;
    --r-card: 26px;
    --r-button: 28px;
    --r-sheet: 30px;
    --r-full: 999px;

    /* UncoverMotion */
    --ease-signature: cubic-bezier(0.2, 0.9, 0.3, 1);
    --ease-entrance: cubic-bezier(0.2, 0.8, 0.2, 1);
    --stagger: 80ms;

    /* UncoverFont families */
    --font-display: "Bricolage Grotesque", ui-rounded, system-ui, sans-serif;
    --font-text: "DM Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f2f3f5;
        --ink-2: #2a2d31;
        --muted: #9ba1a8;
        --muted-2: #868c93;
        --disabled: #5c6168;
        --divider: #3a3e43;
        --soft: #2f3338;
        --surface-app: #151719;
        --surface-card: #212429;
        --text-on-ink: #151719;
        --tint-amber-bg: #4a3819;
        --tint-amber-fg: #f0c888;
        --tint-green-bg: #1c3b31;
        --tint-green-fg: #8fd6bc;
        --glass: rgb(255 255 255 / 0.08);
        --glass-border: rgb(255 255 255 / 0.16);
        --glass-strong: rgb(30 33 36 / 0.82);
        --frost: rgb(20 22 26 / 0.55);
        --dash: rgb(255 255 255 / 0.24);
        --shadow-alpha: 0.5;
    }
}