/*
 * Prumo 3D — design tokens.
 *
 * The palette is the client's logo inside a printer: the brand teal (the machine — frame, read-outs,
 * the name) and the brand orange (the part being printed — every call to action), on a graphite
 * chamber with a trace of teal, and the bone white of raw PLA for text. Component files never
 * hard-code a colour; they read these.
 */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/fonts/archivo-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: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/fonts/archivo-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;

    /* ---- chamber (backgrounds) */
    --ink-1000: #06090a;
    --ink-950: #0a0e10;
    --ink-900: #0f1416;
    --ink-850: #13191c;
    --ink-800: #192024;
    --ink-700: #242c31;
    --ink-600: #333d43;

    /* ---- raw filament (light surfaces and text on dark) */
    --bone-50: #f6f3ec;
    --bone-100: #efebe2;
    --bone-200: #e2ddd1;
    --bone-300: #cfc8b9;

    /* ---- text */
    --text-strong: #f6f3ec;
    --text: #d9d6ce;
    --text-soft: #a3a39e;
    --text-mute: #74767c;
    --text-on-light: #14161a;
    --text-on-light-soft: #4a4d55;

    /* ---- brand (the client's logo colours, exact) */
    --brand-teal: #1a99a7;
    --brand-teal-bright: #2bb5c4;
    --brand-orange: #ec7925;

    /* ---- hot end: the brand orange, as a scale */
    --hot-300: #f9b27e;
    --hot-400: #f39447;
    --hot-500: #ec7925;
    --hot-600: #d4631a;
    --hot-700: #a64b12;
    --hot-glow: rgb(236 121 37 / 0.45);
    --hot-glow-soft: rgb(236 121 37 / 0.16);

    /* ---- machine read-out: the brand teal, lifted for dark backgrounds */
    --hud-400: #5fd3de;
    --hud-500: #2bb5c4;
    --hud-dim: rgb(95 211 222 / 0.55);

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

    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.16);
    --line-on-light: rgb(20 22 26 / 0.12);

    --danger: #ff5a5a;
    --ok: #3fd18b;

    /* ---- type */
    --font-sans: "Archivo", 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.72rem, 0.7rem + 0.1vw, 0.78rem);
    --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.14rem, 1.06rem + 0.4vw, 1.32rem);
    --step-2: clamp(1.36rem, 1.2rem + 0.8vw, 1.75rem);
    --step-3: clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
    --step-4: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);
    --step-5: clamp(2.6rem, 1.6rem + 5vw, 5.9rem);

    /* ---- 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: 1240px;

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

    --shadow-card: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 60px -24px rgb(0 0 0 / 0.7);
    --shadow-hot: 0 10px 40px -8px var(--hot-glow);

    /* ---- 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;
    }
}