/*
 * Restorito design tokens: primitives (raw colour steps) and the semantic tokens every stylesheet
 * and chart reads. Light is the default; dark is stamped by data-theme="dark" or chosen by the
 * system when no theme is stamped. The dark declarations are written twice, once per scope, and
 * .tests/js/app-contrast.test.js keeps the two copies identical and measures every pair below.
 * Contrast ratios and how the values were chosen: .architecture/app/design-system.md.
 */

@font-face {
    font-family: "FoXE";
    src: url("../fonts/FoXE-Regular.woff2") format("woff2"), url("../fonts/FoXE-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FoXE";
    src: url("../fonts/FoXE-Bold.woff2") format("woff2"), url("../fonts/FoXE-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primitives: the dark theme's neutrals, named by lightness (0 is white). */
    --neutral-0: #ffffff;
    --neutral-20: #f0f1f4;
    --neutral-300: #9fa3ab;
    --neutral-400: #7c8088;
    --neutral-800: #2e3036;
    --neutral-850: #272a2f;
    --neutral-870: #24262a;
    --neutral-880: #1f2226;
    --neutral-890: #1c1e22;
    --neutral-900: #17191d;
    --neutral-950: #0c0d10;
    --neutral-200: #c4c7cd;

    /* Primitives: the light theme's cool neutrals (OKLCH hue 255-262), named by lightness. */
    --cool-25: #f1f6fd;
    --cool-35: #eef3fa;
    --cool-50: #e9eff7;
    --cool-90: #e2e7ed;
    --cool-150: #d2dae4;
    --cool-160: #d0d6df;
    --cool-200: #c2cad4;
    --cool-450: #78818c;
    --cool-650: #444d5e;
    --cool-900: #141b26;

    /* Primitives: interface hues - bright steps for dark surfaces, deep ones for light text. */
    --cyan-300: #21d4f0;
    --cyan-tint-dark: #04343c;
    --azure-600: #006cb4;
    --azure-tint-light: #dcf0ff;
    --green-300: #5fd37f;
    --green-700: #057836;
    --amber-300: #feb84d;
    --amber-700: #975d01;
    --red-300: #f2716a;
    --red-700: #c21725;
    --red-800: #8f0f1a;
    --azure-800: #004a7e;
    --red-200: #ffa8a3;
    --amber-900: #5e3a00;
    --green-900: #024d22;
    --blue-300: #6eadfe;
    --indigo-700: #253dad;
    --cyan-700: #00717f;
    --orange-700: #b04a00;

    /* Primitives: the light theme's badge fills - each >= 3:1 on white, dark ink >= 4.5:1 on it. */
    --cyan-450: #019fb9;
    --green-450: #08a74d;
    --amber-450: #c38408;
    --blue-450: #3391fe;
    --red-450: #ff5352;

    /* Primitives: chart series, validated as one categorical set per theme (400 dark, 500 light). */
    --blue-400: #498beb;
    --blue-500: #047bdb;
    --green-400: #40a449;
    --green-500: #0e9a3f;
    --rose-400: #d15d9a;
    --rose-500: #cb2984;
    --ochre-400: #b88a01;
    --ochre-500: #b27f02;
    --violet-400: #9575e2;
    --violet-500: #8047e1;
    --orange-400: #de6e29;
    --orange-500: #d35f03;
    --teal-400: #079390;
    --teal-500: #029393;
    --magenta-400: #b032b9;
    --magenta-500: #b11ebc;
    --lime-400: #659003;
    --lime-500: #6a9708;
    --plum-400: #af4a88;
    --plum-500: #912e6e;
    --sky-400: #1899c5;
    --sky-500: #0392c4;
    --slate-400: #7063a4;
    --slate-500: #685a9a;

    /* Primitives: the heat ramps, lightest first - ember for dark, flame for light. */
    --ember-1: #ffb8aa;
    --ember-2: #f49886;
    --ember-3: #e67964;
    --ember-4: #d75841;
    --ember-5: #c63118;
    --flame-1: #f3562e;
    --flame-2: #db3012;
    --flame-3: #be1506;
    --flame-4: #9b120c;
    --flame-5: #790e0d;

    /* Type */
    --font-sans: "FoXE", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-numeric: "FoXE", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --text-2xl: 2rem;
    --leading-tight: 1.2;
    --leading: 1.5;

    /* Space, radii, sizes, motion */
    --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;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --touch: 44px;
    --sidebar-width: 248px;
    --rail-width: 76px;
    --topbar-height: 60px;
    --content-max: 1680px;
    --duration: 160ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --z-sticky: 10;
    --z-drawer: 40;
    --z-popover: 50;
    --z-dialog: 60;
    --z-toast: 70;

    /* Semantic: light theme. */
    color-scheme: light;
    --surface-0: var(--cool-25);
    --surface-1: var(--neutral-0);
    --surface-2: var(--cool-35);
    --surface-3: var(--neutral-0);
    --surface-hover: var(--cool-50);
    --text: var(--cool-900);
    --text-muted: var(--cool-650);
    /* The chevron of a native select (base.css): the sprite's chevron-down in --text-muted's ink. */
    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444d5e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --border: var(--cool-200);
    --border-control: var(--cool-450);
    --grid: var(--cool-90);
    --accent: var(--azure-600);
    --accent-contrast: var(--neutral-0);
    --accent-soft: var(--azure-tint-light);
    --positive: var(--green-700);
    --on-positive: var(--neutral-0);
    --warning: var(--amber-700);
    --on-warning: var(--neutral-0);
    --danger: var(--red-700);
    --on-danger: var(--neutral-0);
    --danger-surface: #fdeeee;
    --info: var(--indigo-700);
    --on-info: var(--neutral-0);
    --badge-accent: var(--cyan-450);
    --on-badge-accent: var(--neutral-950);
    --badge-positive: var(--green-450);
    --on-badge-positive: var(--neutral-950);
    --badge-warning: var(--amber-450);
    --on-badge-warning: var(--neutral-950);
    --badge-danger: var(--red-450);
    --on-badge-danger: var(--neutral-950);
    --badge-info: var(--blue-450);
    --on-badge-info: var(--neutral-950);
    /* The POS's own, AAA (7:1) on every surface it uses: secondary text, states and pills (pos.css, its scope). */
    --text-muted-strong: var(--cool-650);
    --accent-strong: var(--azure-800);
    --warning-strong: var(--amber-900);
    --positive-strong: var(--green-900);
    --danger-strong: var(--red-800);
    --badge-warning-strong: var(--amber-300);
    --badge-positive-strong: var(--green-300);
    --badge-danger-strong: var(--red-200);
    --focus-ring: var(--azure-600);
    --edit-outline: var(--azure-600);
    --drop-fill: var(--azure-tint-light);
    --scrim: rgb(20 27 38 / 0.45);
    --shadow-1: 0 1px 2px rgb(20 27 38 / 0.06), 0 4px 12px rgb(20 27 38 / 0.07);
    --shadow-2: 0 12px 32px rgb(20 27 38 / 0.16), 0 2px 6px rgb(20 27 38 / 0.08);
    --label-weight: 600;
    --danger-weight: 600;
    --tracking-label: 0.07em;
    --series-1: var(--blue-500);
    --series-2: var(--green-500);
    --series-3: var(--rose-500);
    --series-4: var(--ochre-500);
    --series-5: var(--violet-500);
    --series-6: var(--orange-500);
    --series-7: var(--teal-500);
    --series-8: var(--magenta-500);
    --series-9: var(--lime-500);
    --series-10: var(--plum-500);
    --series-11: var(--sky-500);
    --series-12: var(--slate-500);
    --series-other: var(--cool-450);
    --chart-hover: var(--cool-150);
    --heat-0: var(--cool-160);
    --heat-1: var(--flame-1);
    --heat-2: var(--flame-2);
    --heat-3: var(--flame-3);
    --heat-4: var(--flame-4);
    --heat-5: var(--flame-5);
    --heat-ink-1: var(--neutral-950);
    --heat-ink-2: var(--neutral-0);
    --heat-ink-3: var(--neutral-0);
    --heat-ink-4: var(--neutral-0);
    --heat-ink-5: var(--neutral-0);
    /* A widget's colour settings: each swatch as a mark (3:1 on the card), the ink on it (4.5:1) and as text (4.5:1). */
    --swatch-green: var(--green-450);
    --on-swatch-green: var(--neutral-950);
    --swatch-green-text: var(--green-700);
    --swatch-yellow: var(--amber-450);
    --on-swatch-yellow: var(--neutral-950);
    --swatch-yellow-text: var(--amber-700);
    --swatch-red: var(--red-450);
    --on-swatch-red: var(--neutral-950);
    --swatch-red-text: var(--red-700);
    --swatch-blue: var(--blue-450);
    --on-swatch-blue: var(--neutral-950);
    --swatch-blue-text: var(--azure-600);
    --swatch-cyan: var(--cyan-450);
    --on-swatch-cyan: var(--neutral-950);
    --swatch-cyan-text: var(--cyan-700);
    --swatch-violet: var(--violet-500);
    --on-swatch-violet: var(--neutral-0);
    --swatch-violet-text: var(--violet-500);
    --swatch-orange: var(--orange-500);
    --on-swatch-orange: var(--neutral-950);
    --swatch-orange-text: var(--orange-700);
    --swatch-neutral: var(--cool-450);
    --on-swatch-neutral: var(--neutral-950);
    --swatch-neutral-text: var(--cool-650);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-0: var(--neutral-950);
    --surface-1: var(--neutral-900);
    --surface-2: var(--neutral-880);
    --surface-3: var(--neutral-850);
    --surface-hover: var(--neutral-890);
    --text: var(--neutral-20);
    --text-muted: var(--neutral-300);
    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fa3ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --border: var(--neutral-800);
    --border-control: var(--neutral-400);
    --grid: var(--neutral-870);
    --accent: var(--cyan-300);
    --accent-contrast: var(--neutral-950);
    --accent-soft: var(--cyan-tint-dark);
    --positive: var(--green-300);
    --on-positive: var(--neutral-950);
    --warning: var(--amber-300);
    --on-warning: var(--neutral-950);
    --danger: var(--red-300);
    --on-danger: var(--neutral-950);
    --danger-surface: #3b1618;
    --info: var(--blue-300);
    --on-info: var(--neutral-950);
    --badge-accent: var(--cyan-300);
    --on-badge-accent: var(--neutral-950);
    --badge-positive: var(--green-300);
    --on-badge-positive: var(--neutral-950);
    --badge-warning: var(--amber-300);
    --on-badge-warning: var(--neutral-950);
    --badge-danger: var(--red-300);
    --on-badge-danger: var(--neutral-950);
    --badge-info: var(--blue-300);
    --on-badge-info: var(--neutral-950);
    --text-muted-strong: var(--neutral-200);
    --accent-strong: var(--cyan-300);
    --warning-strong: var(--amber-300);
    --positive-strong: var(--green-300);
    --danger-strong: var(--red-200);
    --badge-warning-strong: var(--amber-300);
    --badge-positive-strong: var(--green-300);
    --badge-danger-strong: var(--red-200);
    --focus-ring: var(--cyan-300);
    --edit-outline: var(--cyan-300);
    --drop-fill: var(--cyan-tint-dark);
    --scrim: rgb(0 0 0 / 0.6);
    --shadow-1: none;
    --shadow-2: 0 12px 32px rgb(0 0 0 / 0.5);
    --label-weight: 400;
    --danger-weight: initial;
    --tracking-label: 0.06em;
    --series-1: var(--blue-400);
    --series-2: var(--green-400);
    --series-3: var(--rose-400);
    --series-4: var(--ochre-400);
    --series-5: var(--violet-400);
    --series-6: var(--orange-400);
    --series-7: var(--teal-400);
    --series-8: var(--magenta-400);
    --series-9: var(--lime-400);
    --series-10: var(--plum-400);
    --series-11: var(--sky-400);
    --series-12: var(--slate-400);
    --series-other: var(--neutral-400);
    --chart-hover: var(--neutral-890);
    --heat-0: var(--neutral-880);
    --heat-1: var(--ember-5);
    --heat-2: var(--ember-4);
    --heat-3: var(--ember-3);
    --heat-4: var(--ember-2);
    --heat-5: var(--ember-1);
    --heat-ink-1: var(--neutral-0);
    --heat-ink-2: var(--neutral-950);
    --heat-ink-3: var(--neutral-950);
    --heat-ink-4: var(--neutral-950);
    --heat-ink-5: var(--neutral-950);
    --swatch-green: var(--green-300);
    --on-swatch-green: var(--neutral-950);
    --swatch-green-text: var(--green-300);
    --swatch-yellow: var(--amber-300);
    --on-swatch-yellow: var(--neutral-950);
    --swatch-yellow-text: var(--amber-300);
    --swatch-red: var(--red-300);
    --on-swatch-red: var(--neutral-950);
    --swatch-red-text: var(--red-300);
    --swatch-blue: var(--blue-300);
    --on-swatch-blue: var(--neutral-950);
    --swatch-blue-text: var(--blue-300);
    --swatch-cyan: var(--cyan-300);
    --on-swatch-cyan: var(--neutral-950);
    --swatch-cyan-text: var(--cyan-300);
    --swatch-violet: var(--violet-400);
    --on-swatch-violet: var(--neutral-950);
    --swatch-violet-text: var(--violet-400);
    --swatch-orange: var(--orange-400);
    --on-swatch-orange: var(--neutral-950);
    --swatch-orange-text: var(--orange-400);
    --swatch-neutral: var(--neutral-400);
    --on-swatch-neutral: var(--neutral-950);
    --swatch-neutral-text: var(--neutral-300);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface-0: var(--neutral-950);
        --surface-1: var(--neutral-900);
        --surface-2: var(--neutral-880);
        --surface-3: var(--neutral-850);
        --surface-hover: var(--neutral-890);
        --text: var(--neutral-20);
        --text-muted: var(--neutral-300);
        --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fa3ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
        --border: var(--neutral-800);
        --border-control: var(--neutral-400);
        --grid: var(--neutral-870);
        --accent: var(--cyan-300);
        --accent-contrast: var(--neutral-950);
        --accent-soft: var(--cyan-tint-dark);
        --positive: var(--green-300);
        --on-positive: var(--neutral-950);
        --warning: var(--amber-300);
        --on-warning: var(--neutral-950);
        --danger: var(--red-300);
        --on-danger: var(--neutral-950);
        --danger-surface: #3b1618;
        --info: var(--blue-300);
        --on-info: var(--neutral-950);
        --badge-accent: var(--cyan-300);
        --on-badge-accent: var(--neutral-950);
        --badge-positive: var(--green-300);
        --on-badge-positive: var(--neutral-950);
        --badge-warning: var(--amber-300);
        --on-badge-warning: var(--neutral-950);
        --badge-danger: var(--red-300);
        --on-badge-danger: var(--neutral-950);
        --badge-info: var(--blue-300);
        --on-badge-info: var(--neutral-950);
        --text-muted-strong: var(--neutral-200);
        --accent-strong: var(--cyan-300);
        --warning-strong: var(--amber-300);
        --positive-strong: var(--green-300);
        --danger-strong: var(--red-200);
        --badge-warning-strong: var(--amber-300);
        --badge-positive-strong: var(--green-300);
        --badge-danger-strong: var(--red-200);
        --focus-ring: var(--cyan-300);
        --edit-outline: var(--cyan-300);
        --drop-fill: var(--cyan-tint-dark);
        --scrim: rgb(0 0 0 / 0.6);
        --shadow-1: none;
        --shadow-2: 0 12px 32px rgb(0 0 0 / 0.5);
        --label-weight: 400;
        --danger-weight: initial;
        --tracking-label: 0.06em;
        --series-1: var(--blue-400);
        --series-2: var(--green-400);
        --series-3: var(--rose-400);
        --series-4: var(--ochre-400);
        --series-5: var(--violet-400);
        --series-6: var(--orange-400);
        --series-7: var(--teal-400);
        --series-8: var(--magenta-400);
        --series-9: var(--lime-400);
        --series-10: var(--plum-400);
        --series-11: var(--sky-400);
    --series-12: var(--slate-400);
        --series-other: var(--neutral-400);
        --chart-hover: var(--neutral-890);
        --heat-0: var(--neutral-880);
        --heat-1: var(--ember-5);
        --heat-2: var(--ember-4);
        --heat-3: var(--ember-3);
        --heat-4: var(--ember-2);
        --heat-5: var(--ember-1);
        --heat-ink-1: var(--neutral-0);
        --heat-ink-2: var(--neutral-950);
        --heat-ink-3: var(--neutral-950);
        --heat-ink-4: var(--neutral-950);
        --heat-ink-5: var(--neutral-950);
        --swatch-green: var(--green-300);
        --on-swatch-green: var(--neutral-950);
        --swatch-green-text: var(--green-300);
        --swatch-yellow: var(--amber-300);
        --on-swatch-yellow: var(--neutral-950);
        --swatch-yellow-text: var(--amber-300);
        --swatch-red: var(--red-300);
        --on-swatch-red: var(--neutral-950);
        --swatch-red-text: var(--red-300);
        --swatch-blue: var(--blue-300);
        --on-swatch-blue: var(--neutral-950);
        --swatch-blue-text: var(--blue-300);
        --swatch-cyan: var(--cyan-300);
        --on-swatch-cyan: var(--neutral-950);
        --swatch-cyan-text: var(--cyan-300);
        --swatch-violet: var(--violet-400);
        --on-swatch-violet: var(--neutral-950);
        --swatch-violet-text: var(--violet-400);
        --swatch-orange: var(--orange-400);
        --on-swatch-orange: var(--neutral-950);
        --swatch-orange-text: var(--orange-400);
        --swatch-neutral: var(--neutral-400);
        --on-swatch-neutral: var(--neutral-950);
        --swatch-neutral-text: var(--neutral-300);
    }
}