/* The application's design tokens, copied from the product so the site and the
   campus are one system:
   - palette: lumora-lms/var/themes/lumora/colors.css (the Lumora theme),
   - everything else: the :root block of lumora-lms/assets/css/lumora/interface.css.
   Keep the names and values the same; change them there first. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable-jznyFqg.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-latin-O3xqIJy.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-latin-ext-S2YpVqh.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;

    /* The Lumora theme. */
    --color-primary-base: 17 17 17;
    --color-primary-gradient: 42 42 42;
    --color-secondary-base: 162 36 159;
    --color-tertiary-base: 51 65 85;
    --color-success-base: 4 120 87;
    --color-info-base: 14 116 144;
    --color-warning-base: 245 158 11;
    --color-warning-gradient: 193 110 0;
    --color-danger-base: 220 38 38;

    --brand-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --brand-display: "Plus Jakarta Sans", var(--brand-font);
    --brand-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --brand-topbar-height: 4rem;

    /* Neutral (zinc) greys: with the black primary, nothing but the logo and the
       action colours carries a hue. */
    --brand-shell: #f4f4f5;
    --brand-surface: #fff;
    --brand-subtle: #fafafa;
    --brand-border: #e4e4e7;
    --brand-border-strong: #d4d4d8;
    --brand-ink: #09090b;
    --brand-text: #3f3f46;
    --brand-muted: #71717a;
    --brand-hover: rgb(9 9 11 / 0.05);
    --brand-radius-sm: 8px;
    --brand-radius: 10px;
    --brand-radius-lg: 16px;
    --brand-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --brand-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 2px 6px -2px rgb(15 23 42 / 0.06);
    --brand-shadow-md: 0 12px 28px -12px rgb(15 23 42 / 0.18), 0 2px 6px -2px rgb(15 23 42 / 0.06);
    --brand-shadow-lg: 0 28px 56px -20px rgb(15 23 42 / 0.25);
    --brand-mask: rgb(11 18 32 / 0.4);
    --brand-tint: rgb(var(--color-primary-base) / 0.08);
    --brand-tint-strong: rgb(var(--color-primary-base) / 0.14);
    --brand-ring: 0 0 0 3px rgb(var(--color-primary-base) / 0.2);

    /* Dark navigation and banners: graphite with the primary colour mixed in. */
    --brand-nav: color-mix(in oklab, rgb(var(--color-primary-base)) 18%, #141416);
    --brand-nav-deep: color-mix(in oklab, rgb(var(--color-primary-base)) 8%, #09090b);
    --brand-nav-text: rgb(244 244 245 / 0.8);
    --brand-nav-muted: rgb(161 161 170 / 0.95);
    --brand-nav-hover: rgb(255 255 255 / 0.07);
    --brand-nav-line: rgb(255 255 255 / 0.1);
    --brand-banner-button: #fff;
    --brand-banner-button-hover: #e4e4e7;
    --brand-banner-button-text: #09090b;
    --brand-banner-button-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
    --brand-banner:
        radial-gradient(34rem 18rem at 100% 0%, rgb(255 255 255 / 0.11), transparent 70%),
        radial-gradient(22rem 14rem at 0% 120%, rgb(192 132 252 / 0.2), transparent 70%),
        linear-gradient(120deg, var(--brand-nav-deep) 0%, var(--brand-nav) 55%, #2a2a2e 130%);
    --brand-banner-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='140 40 300 364'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='120' x2='0' y2='392' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.05'/%3E%3C/linearGradient%3E%3CradialGradient id='g' cx='320' cy='160' r='118' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23C9BFFF' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%23C9BFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='320' cy='160' r='118' fill='url(%23g)'/%3E%3Ccircle cx='320' cy='160' r='60' fill='%23C9BFFF' fill-opacity='.14'/%3E%3Ccircle cx='320' cy='160' r='40' fill='%23C9BFFF' fill-opacity='.8'/%3E%3Cpolygon points='152,120 212,120 212,332 360,332 360,392 152,392' fill='url(%23f)' stroke='%23fff' stroke-opacity='.16' stroke-width='1.5' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

    /* Decorative hues (course tools, shortcut tiles): categories, not palette roles. */
    --brand-hue-blue: 37 99 235;
    --brand-hue-indigo: 79 70 229;
    --brand-hue-violet: 124 58 237;
    --brand-hue-fuchsia: 192 38 211;
    --brand-hue-pink: 219 39 119;
    --brand-hue-rose: 225 29 72;
    --brand-hue-orange: 234 88 12;
    --brand-hue-amber: 217 119 6;
    --brand-hue-green: 22 163 74;
    --brand-hue-emerald: 5 150 105;
    --brand-hue-teal: 13 148 136;
    --brand-hue-cyan: 8 145 178;
    --brand-hue-sky: 2 132 199;
    --brand-hue-slate: 71 85 105;

    /* The site's own measures. */
    --page: 1280px;
    --gutter: clamp(1rem, 3vw, 2rem);
    --section: clamp(2.5rem, 5vw, 4rem);
}