/*
 * Sa 3D — design tokens.
 *
 * The palette is a modelling program's viewport at night: a graphite canvas with a trace of violet,
 * the ultraviolet of a SELECTED face (links, wireframes, eyebrows — what the eye should follow) and the
 * lime of a SELECTED vertex (every call to action, used sparingly so it always means "go"). Bone white
 * for text, the three axis colours for the gizmo only. Component files never hard-code a colour; they
 * read these.
 */

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("/fonts/unbounded-latin.woff2") format("woff2");
    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: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("/fonts/unbounded-latin-ext.woff2") format("woff2");
    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;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/manrope-latin.woff2") format("woff2");
    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: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
    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;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
    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: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
    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: dark;

    /* ---- viewport (backgrounds): graphite with a trace of violet */
    --ink-1000: #050508;
    --ink-950: #0a0a0f;
    --ink-900: #0f0f16;
    --ink-850: #14141d;
    --ink-800: #1a1a25;
    --ink-700: #252533;
    --ink-600: #353546;

    /* ---- clay (light surfaces and text on dark) */
    --bone-50: #f2efe9;
    --bone-100: #e9e5dd;
    --bone-200: #d9d4ca;
    --bone-300: #bfb9ad;

    /* ---- text */
    --text-strong: #f2efe9;
    --text: #d6d3dc;
    --text-soft: #a09eab;
    --text-mute: #6f6d7b;
    --text-on-light: #14141c;
    --text-on-light-soft: #4a4957;

    /* ---- brand (the logo's colours, exact) */
    --brand-violet: #7c5cff;
    --brand-lime: #c8ff4d;

    /* ---- the selected vertex: every call to action */
    --lime-300: #e2ff9e;
    --lime-400: #d5ff72;
    --lime-500: #c8ff4d;
    --lime-600: #aee631;
    --lime-700: #7ea61c;
    --lime-glow: rgb(200 255 77 / 0.42);
    --lime-glow-soft: rgb(200 255 77 / 0.14);

    /* ---- the selected face: wireframes, links, read-outs */
    --violet-300: #c4b6ff;
    --violet-400: #a18bff;
    --violet-500: #7c5cff;
    --violet-600: #6442f5;
    --violet-700: #4a2fc2;
    --violet-dim: rgb(161 139 255 / 0.55);
    --violet-glow: rgb(124 92 255 / 0.45);
    --violet-glow-soft: rgb(124 92 255 / 0.16);

    /* ---- the gizmo: X, Y, Z */
    --axis-x: #ff5468;
    --axis-y: #8ee04a;
    --axis-z: #4f8dff;

    --wa-500: #25d366;
    --wa-600: #1ebe5a;

    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.16);
    --line-violet: rgb(161 139 255 / 0.28);
    --line-on-light: rgb(20 20 28 / 0.12);

    --danger: #ff5a6e;
    --ok: #57e39a;

    /* ---- type */
    --font-display: "Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --step--2: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);
    --step--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.92rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
    --step-1: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
    --step-2: clamp(1.3rem, 1.16rem + 0.7vw, 1.66rem);
    --step-3: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
    --step-4: clamp(1.95rem, 1.4rem + 2.7vw, 3.5rem);
    --step-5: clamp(2.5rem, 1.5rem + 4.9vw, 5.6rem);

    /* ---- space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
    --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem);
    --container: 1260px;

    /* ---- shape */
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --radius-xl: 30px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 28px 70px -30px rgb(0 0 0 / 0.8);
    --shadow-lime: 0 10px 36px -8px var(--lime-glow);
    --shadow-violet: 0 18px 60px -18px var(--violet-glow);

    /* ---- the viewport grid, as a background any band can wear */
    --grid-minor: rgb(255 255 255 / 0.028);
    --grid-major: rgb(255 255 255 / 0.055);

    /* ---- motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 160ms;
    --dur-2: 280ms;
    --dur-3: 520ms;
    --dur-4: 900ms;

    /* ---- layering */
    --z-base: 1;
    --z-sticky: 20;
    --z-rail: 30;
    --z-header: 40;
    --z-fab: 50;
    --z-menu: 60;
    --z-dialog: 80;
    --z-editor: 1000;

    --header-h: 76px;
}

@media (max-width: 860px) {
    :root {
        --header-h: 64px;
    }
}