/* Design tokens. Every colour is a light-dark() pair, so one definition serves both themes and any
   subtree can be forced into a theme with [data-theme]. The theme preference lives in localStorage
   ("mq-offers.theme": light | dark | system); js/theme-init.js applies it before the first paint. */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    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: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    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 Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    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;
}

:root {
    color-scheme: light dark;

    /* Surfaces: canvas < surface < raised. "sunken" is for wells and hover fills. */
    --canvas: light-dark(#f5f4f0, #111110);
    --surface: light-dark(#ffffff, #191817);
    --surface-raised: light-dark(#ffffff, #201f1d);
    --surface-subtle: light-dark(#faf9f6, #1d1c1a);
    --surface-sunken: light-dark(#f0eee9, #252422);
    --surface-hover: light-dark(#f3f1ec, #242321);
    --surface-active: light-dark(#eae7e0, #2c2a27);
    --overlay: light-dark(rgb(28 26 22 / 0.32), rgb(0 0 0 / 0.6));

    --border: light-dark(#e5e2da, #2d2b28);
    --border-subtle: light-dark(#eeebe5, #252422);
    --border-strong: light-dark(#cfcbc1, #403d38);

    --text: light-dark(#1c1b18, #edebe6);
    --text-secondary: light-dark(#55524a, #b5b1a8);
    --text-muted: light-dark(#75716a, #8f8b82);
    --text-disabled: light-dark(#a9a59c, #5e5b55);

    /* Ink: the primary action. Gold (the MOSAIQ brand colour) is the accent: focus, selection, links. */
    --ink: light-dark(#1f1e1b, #edebe6);
    --ink-hover: light-dark(#35332e, #ffffff);
    --on-ink: light-dark(#ffffff, #171614);

    --accent: light-dark(#9d8c45, #c9b668);
    --accent-hover: light-dark(#8a7a38, #d6c47b);
    --accent-text: light-dark(#6f6020, #d9c87f);
    --accent-soft: light-dark(#f4f0e0, #2a2617);
    --accent-soft-hover: light-dark(#ebe5cc, #353020);
    --accent-border: light-dark(#d9cf9f, #5a5027);
    --on-accent: light-dark(#1c1b18, #171614);
    --focus-ring: light-dark(rgb(157 140 69 / 0.45), rgb(201 182 104 / 0.5));

    --success: light-dark(#2c7a4b, #6cc68f);
    --success-soft: light-dark(#e5f3ea, #17291e);
    --warning: light-dark(#9a5d07, #e0a84f);
    --warning-soft: light-dark(#fbf1dd, #2c2313);
    --danger: light-dark(#bb3a2e, #f0837a);
    --danger-hover: light-dark(#a02f24, #f59a92);
    --danger-soft: light-dark(#fbeae7, #2f1a18);
    --on-danger: light-dark(#ffffff, #1a0f0e);
    --info: light-dark(#2a68ab, #7db3ea);
    --info-soft: light-dark(#e7f0fa, #16232f);

    --merge: light-dark(#6b4fd8, #a593f5);
    --merge-soft: light-dark(#eeeafc, #221d3a);

    --shadow-xs: 0 1px 2px light-dark(rgb(28 26 22 / 0.05), rgb(0 0 0 / 0.4));
    --shadow-sm: 0 1px 2px light-dark(rgb(28 26 22 / 0.06), rgb(0 0 0 / 0.4)), 0 2px 6px light-dark(rgb(28 26 22 / 0.04), rgb(0 0 0 / 0.25));
    --shadow-md: 0 2px 4px light-dark(rgb(28 26 22 / 0.05), rgb(0 0 0 / 0.4)), 0 8px 24px light-dark(rgb(28 26 22 / 0.1), rgb(0 0 0 / 0.5));
    --shadow-lg: 0 4px 8px light-dark(rgb(28 26 22 / 0.05), rgb(0 0 0 / 0.4)), 0 24px 64px light-dark(rgb(28 26 22 / 0.18), rgb(0 0 0 / 0.65));

    --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.625rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* 4px rhythm. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    --control-height: 2rem;
    --control-height-sm: 1.625rem;
    --control-height-lg: 2.5rem;

    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    --sidebar-width: 15rem;
    --sidebar-width-collapsed: 3.5rem;
    --page-max-width: 76rem;

    --z-sticky: 10;
    --z-sidebar: 20;
    --z-drawer: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-drag: 80;
}

:root[data-theme="light"],
[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"],
[data-theme="dark"] {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-normal: 1ms;
        --duration-slow: 1ms;
    }
}