@layer reset, tokens, base, layout, components, features, utilities;

/* qÚčto design system 2026 — tokens (ADR-0223; visual language ADR-0225
 * „Temný rám, plovoucí list", docs/DESIGN_SYSTEM.md).
 *
 * The ONLY file allowed to contain colour literals. Components use the
 * semantic tokens below, never hex/rgb values, so a later dark theme
 * (RESEARCH D8, phase 2) only has to redefine this file (light-dark()).
 *
 * White-label inputs (overridden by the nonced <style> in base.html.twig,
 * validated #rrggbb from ThemeService — never rename them):
 *   --qct-brand, --qct-brand-ink, --qct-secondary, --qct-ink, --qct-canvas,
 *   --qct-sidebar, --qct-sidebar-ink
 * Every derived colour is computed from them: the accent scale via relative
 * colour syntax (absolute lightness ⇒ contrast independent of the tenant's
 * hue), with the Mojiva-amber hex values as the fallback for engines without
 * relative colours. The frame of the app is the sidebar colour, the floating
 * sheet is the canvas colour, surfaces are white with a soft ink ring.
 */
@layer tokens {
    :root {
        color-scheme: light;

        /* ---- white-label inputs (defaults = Mojiva) ---- */
        --qct-brand: #eba73a;
        --qct-brand-ink: #ffffff; /* content on the brand colour: white unless the brand is too light (ThemeService, Phase 256) */
        --qct-secondary: #444444; /* secondary button text */
        --qct-ink: #1a1a1a;
        --qct-canvas: #f6f5f3;
        --qct-sidebar: #1a1a1a;
        --qct-sidebar-ink: #ffffff;

        /* ---- accent scale (amber, oklch(0.775 0.143 74.8) at 500) ---- */
        --accent-50: #fef9f1;
        --accent-100: #fef2dd;
        --accent-200: #ffe4b9;
        --accent-300: #ffd18d;
        --accent-400: #f9ba58;
        --accent-500: var(--qct-brand);
        --accent-600: #d58d25;
        --accent-700: #b36e1d;
        --accent-800: #8f521b;
        --accent-900: #6d3c16;

        --accent: var(--accent-500);
        /* Hover/press always DARKER than the brand (never the fixed-L 600 step):
           amber keeps ≥6:1 with ink, dark white-label brands keep white ink. */
        --accent-hover: color-mix(in oklch, var(--qct-brand) 86%, #000);
        --accent-edge: color-mix(in oklch, var(--qct-brand) 74%, #000);
        --accent-ink: var(--qct-brand-ink);
        --accent-wash: var(--accent-50);
        --accent-soft: var(--accent-100);
        --accent-line: var(--accent-300);
        --accent-text: var(--accent-800); /* rare: text on accent-soft (5.6:1) */

        /* ---- warm neutrals (hue 85) ---- */
        --neutral-0: #ffffff;
        --neutral-25: #fbfaf9;
        --neutral-40: #faf9f7;  /* row hover (concept A) */
        --neutral-50: var(--qct-canvas);
        --neutral-75: #f0efec;  /* hairline between rows (concept A) */
        --neutral-100: #eeedea;
        --neutral-125: #ebe9e5; /* segmented track, chart grid */
        --neutral-150: #e8e6e2;
        --neutral-200: #dfdeda;
        --neutral-300: #cfcdc9;
        --neutral-400: #a6a4a0;
        --neutral-500: #8e8c88;
        --neutral-600: #6a6965;
        --neutral-700: #54524f;
        --neutral-800: #3e3d3b;
        --neutral-850: #3a3936; /* costs series (concept A) */
        --neutral-900: #252422;
        --neutral-950: #1a1a1a;

        --surface: var(--neutral-0);
        --surface-2: var(--neutral-100);
        --surface-sunken: var(--neutral-25);
        --surface-inset: var(--qct-canvas); /* nested plate inside a white card */
        --canvas: var(--qct-canvas);
        --border-subtle: var(--neutral-75);
        --border: var(--neutral-150);
        --border-strong: var(--neutral-300);
        --border-control: var(--neutral-500); /* 3.36:1 on white — WCAG 1.4.11 */
        --border-control-hover: var(--neutral-600);
        --text: var(--qct-ink);
        --text-secondary: var(--neutral-700);
        --text-muted: var(--neutral-600); /* 5.5:1 white, 5.0:1 canvas, 4.53:1 segment track */
        --text-disabled: var(--neutral-400);
        --text-on-strong: #ffffff; /* text on *-strong tone fills */
        --hover: var(--neutral-100);
        --pressed: var(--neutral-150);
        --row-hover: var(--neutral-40);
        --selected: var(--accent-50);
        --selected-hover: var(--accent-100);

        /* Links: ink text, quiet underline (never amber text on light) */
        --link: var(--text);
        --link-underline: color-mix(in oklch, var(--text) 30%, transparent);
        --link-underline-hover: var(--text);

        /* ---- frame & sheet (ADR-0225): the whole window is the dark frame,
           content lies on a rounded light sheet inset from the window edge ---- */
        --frame-bg: var(--qct-sidebar);
        --frame-ink: var(--qct-sidebar-ink);
        --frame-glow: radial-gradient(closest-side, color-mix(in oklch, var(--qct-brand) 18%, transparent), transparent);
        --frame-glow-w: 420px;
        --frame-glow-h: 320px;
        --sheet-bg: var(--qct-canvas);
        --sheet-radius: 18px;
        --sheet-inset: 8px;
        --sheet-edge: 0 0 0 1px color-mix(in oklch, var(--qct-sidebar-ink) 6%, transparent);
        --sheet-h: calc(100dvh - 2 * var(--sheet-inset)); /* visible sheet height (full-height pages: chat) */

        /* ---- surface rings: static surfaces have NO border, a soft ink ring
           instead (+ a transparent 1px border that forced colours paint) ---- */
        --ring-color: color-mix(in oklch, var(--qct-ink) 6%, transparent);
        --ring-color-hover: color-mix(in oklch, var(--qct-ink) 12%, transparent);
        --ring-color-strong: color-mix(in oklch, var(--qct-ink) 14%, transparent); /* secondary button edge */
        --e0: 0 0 0 1px var(--ring-color), 0 1px 2px color-mix(in oklch, var(--qct-ink) 4%, transparent);
        --e0-hover: 0 0 0 1px var(--ring-color-hover), 0 1px 3px color-mix(in oklch, var(--qct-ink) 6%, transparent);
        --surface-ring: var(--e0);
        --surface-ring-hover: var(--e0-hover);

        /* ---- sidebar on the frame (dark, white-label) ---- */
        --sb-bg: var(--qct-sidebar);
        /* Greys on the frame are mixes of the sidebar ink into the sidebar, so a
           white-label frame (navy, or even light with dark ink) keeps its
           contrast: on #1a1a1a ≈ 9.2 / 5.5 / 6.2 : 1 (oklch L interpolation). */
        --sb-text: color-mix(in oklch, var(--qct-sidebar-ink) 74%, var(--qct-sidebar));
        --sb-heading: color-mix(in oklch, var(--qct-sidebar-ink) 56%, var(--qct-sidebar)); /* quiet section headings */
        --sb-muted: color-mix(in oklch, var(--qct-sidebar-ink) 60%, var(--qct-sidebar));   /* kickers, search placeholder, e-mail */
        --sb-text-active: var(--qct-sidebar-ink);
        --sb-hover: color-mix(in oklch, var(--qct-sidebar-ink) 5%, transparent);
        --sb-raised: color-mix(in oklch, var(--qct-sidebar-ink) 5%, transparent);
        --sb-raised-hover: color-mix(in oklch, var(--qct-sidebar-ink) 8%, transparent);
        --sb-raised-ring: inset 0 0 0 1px color-mix(in oklch, var(--qct-sidebar-ink) 7%, transparent);
        --sb-search-bg: color-mix(in oklch, var(--qct-sidebar-ink) 3.5%, transparent);
        --sb-kbd-bg: color-mix(in oklch, var(--qct-sidebar-ink) 7%, transparent);
        --sb-kbd-text: color-mix(in oklch, var(--qct-sidebar-ink) 72%, var(--qct-sidebar));
        --sb-active-bg: color-mix(in oklch, var(--qct-sidebar-ink) 8%, transparent);
        --sb-active-ring: inset 0 0 0 1px color-mix(in oklch, var(--qct-sidebar-ink) 6%, transparent);
        --sb-icon: var(--sb-muted);
        --sb-icon-active: var(--accent-400);
        --sb-indicator: var(--accent-500);
        --sb-avatar-bg: color-mix(in oklch, var(--qct-sidebar-ink) 8%, var(--qct-sidebar));
        --sb-avatar-ink: var(--accent-300);
        --sb-border: color-mix(in oklch, var(--qct-sidebar-ink) 8%, transparent);
        --sb-focus: var(--accent-400); /* focus ring on the dark frame (10:1) */

        /* ---- status tones (RESEARCH D1: equal L/C across hues) ---- */
        --success-wash: #eafaec;
        --success-border: #bae4c1;
        --success-solid: #03a14a;
        --success-strong: #02853c;
        --success-ink: #007132;
        --success-pill: #e7f6ea;

        --danger-wash: #fef2f0;
        --danger-border: #ffc8c1;
        --danger-solid: #d9544b;
        --danger-strong: #bd3933;
        --danger-ink: #9d352f;
        --danger-pill: #fdecea;

        --warning-wash: #fff2eb;
        --warning-border: #facdaf;
        --warning-solid: #c96805;
        --warning-strong: #b05a02;
        --warning-ink: #964c04;
        --warning-pill: #fff1e0;

        --info-wash: #eff6fe;
        --info-border: #badbff;
        --info-solid: #1289e7;
        --info-strong: #0271c2;
        --info-ink: #0060a6;
        --info-pill: #eaf3fe;

        --neutral-wash: var(--neutral-100);
        --neutral-border: var(--neutral-300);
        --neutral-solid: var(--neutral-500);
        --neutral-ink: var(--neutral-700);
        --neutral-pill: var(--neutral-100);

        /* ---- focus (amber-700: 4.07 white · 3.73 canvas · 4.28 sidebar) ---- */
        --focus: var(--accent-700);
        --focus-ring: 2px solid var(--focus);
        --focus-offset: 2px;
        --focus-offset-input: 1px;

        /* ---- charts (RESEARCH D4 „Grafy"; concept A bars) ---- */
        --chart-1: var(--accent-600);
        --chart-line: var(--accent-700);
        --chart-compare: var(--neutral-400);
        --chart-2: #495766;
        --chart-3: #209993;
        --chart-4: #795dba;
        --chart-5: #cb5e73;
        --chart-6: #0271c2;
        --chart-other: #898781;
        --chart-grid: var(--neutral-125);
        --chart-baseline: var(--neutral-300);
        --chart-axis: var(--text-muted);
        --chart-up: var(--success-solid);
        --chart-down: var(--danger-solid);
        --chart-revenue: var(--accent-500);  /* „Výnosy" bars */
        --chart-cost: var(--neutral-850);    /* „Náklady" bars */
        --chart-bar-radius: 4px;
        --chart-area: color-mix(in oklch, var(--qct-brand) 35%, transparent); /* sparkline fill top */

        /* ---- typography (fixed scale, rem at 16px root) ---- */
        --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        /* Only for <code> technical identifiers meant to be copied — never UI labels. */
        --font-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

        --fs-2xs: 0.71875rem;  --lh-2xs: 1rem;         /* 11.5/16 nav headings, kbd, eyebrow */
        --fs-xs: 0.75rem;      --lh-xs: 1rem;          /* 12/16 pill, meta, axis */
        --fs-label: 0.78125rem; --lh-label: 1.125rem;  /* 12.5/18 table header, KPI label, breadcrumb */
        --fs-sm: 0.8125rem;    --lh-sm: 1.125rem;      /* 13/18 hint, secondary line */
        --fs-nav: 0.84375rem;  --lh-nav: 1.25rem;      /* 13.5/20 nav item, button, subtitle */
        --fs-base: 0.875rem;   --lh-base: 1.25rem;     /* 14/20 UI default */
        --fs-title-sm: 0.9375rem; --lh-title-sm: 1.375rem; /* 15/22 card title */
        --fs-md: 1rem;         --lh-md: 1.5rem;        /* 16/24 long text, touch inputs */
        --fs-title: 1.125rem;  --lh-title: 1.5rem;     /* 18/24 section, dialog */
        --fs-h1: 1.875rem;     --lh-h1: 2.0625rem;     /* 30/33 page H1 */
        --fs-kpi: 1.6875rem;   --lh-kpi: 1.9375rem;    /* 27/31 KPI value */
        --fs-kpi-unit: 0.9375rem;                      /* 15 „Kč" beside a KPI value */
        --fs-control: var(--fs-nav);                   /* 13.5 buttons */

        --fw-regular: 400;
        --fw-medium: 500;
        --fw-strong: 550;
        --fw-semibold: 600;
        --fw-bold: 650;

        --tracking-xs: 0.01em;
        --tracking-title: -0.01em;
        --tracking-h1: -0.03em;
        --tracking-kpi: -0.03em;

        /* ---- spacing (4px base) ---- */
        --sp-0: 0;
        --sp-0-5: 2px;
        --sp-1: 4px;
        --sp-1-5: 6px;
        --sp-2: 8px;
        --sp-2-5: 10px;
        --sp-3: 12px;
        --sp-3-5: 14px;
        --sp-4: 16px;
        --sp-5: 20px;
        --sp-5-5: 22px;
        --sp-6: 24px;
        --sp-8: 32px;
        --sp-10: 40px;
        --sp-12: 48px;
        --sp-16: 64px;

        /* ---- radii (ADR-0225: cards 16, controls 10, nav 9, pills 999) ---- */
        --r-xs: 5px;   /* checkbox, tag, kbd */
        --r-sm: 8px;   /* menu item, segment thumb, small chip */
        --r-md: 10px;  /* control: input, button, popover item plate */
        --r-lg: 16px;  /* card, table card, KPI tile */
        --r-xl: 18px;  /* sheet, dialog, drawer */
        --r-pill: 999px;
        --r-card: var(--r-lg);
        --r-card-nested: 12px; /* plate inside a card */
        --r-task: 14px;        /* task tile */
        --r-control: var(--r-md);
        --r-nav: 9px;
        --r-pop: 12px;         /* menus, popovers */
        --r-sheet: var(--sheet-radius);

        /* ---- elevation: static surfaces = ring (--e0), floating = shadow ---- */
        --e1: 0 1px 2px color-mix(in oklch, var(--qct-ink) 6%, transparent);
        --e2: 0 12px 28px -10px color-mix(in oklch, var(--qct-ink) 22%, transparent), 0 3px 8px -3px color-mix(in oklch, var(--qct-ink) 10%, transparent);
        --e3: 0 28px 64px -16px color-mix(in oklch, var(--qct-ink) 32%, transparent), 0 8px 18px -8px color-mix(in oklch, var(--qct-ink) 14%, transparent);
        --pop-shadow: 0 0 0 1px var(--ring-color-hover), var(--e2);
        --dialog-shadow: 0 0 0 1px var(--ring-color), var(--e3);
        --backdrop: rgb(26 26 26 / 0.45);
        --scroll-shadow: rgb(26 26 26 / 0.1);

        /* ---- buttons: tactile primary on the brand, derived for white-label ---- */
        --btn-primary-bg: linear-gradient(180deg, color-mix(in oklch, var(--qct-brand) 88%, #fff) 0%, var(--qct-brand) 100%);
        --btn-primary-bg-hover: linear-gradient(180deg, var(--qct-brand) 0%, color-mix(in oklch, var(--qct-brand) 90%, #000) 100%);
        --btn-primary-bg-flat: var(--qct-brand); /* forced colours / fallback */
        --btn-primary-shadow:
            inset 0 1px 0 rgb(255 255 255 / 0.45),
            0 1px 2px color-mix(in oklch, var(--accent-900) 30%, transparent),
            0 0 0 1px color-mix(in oklch, var(--qct-brand) 70%, #000);
        --btn-primary-shadow-pressed:
            inset 0 1px 2px color-mix(in oklch, var(--accent-900) 25%, transparent),
            0 0 0 1px color-mix(in oklch, var(--qct-brand) 66%, #000);
        --btn-secondary-shadow: 0 0 0 1px var(--ring-color-strong), 0 1px 2px color-mix(in oklch, var(--qct-ink) 6%, transparent);
        --btn-secondary-shadow-hover: 0 0 0 1px color-mix(in oklch, var(--qct-ink) 22%, transparent), 0 1px 2px color-mix(in oklch, var(--qct-ink) 8%, transparent);
        --btn-danger-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px color-mix(in oklch, var(--danger-ink) 30%, transparent), 0 0 0 1px var(--danger-ink);

        /* ---- segmented control (area tabs, period switches, density) ---- */
        --seg-track: var(--neutral-125);
        --seg-pad: 3px;
        --seg-radius: var(--r-md);
        --seg-item-radius: var(--r-sm);
        --seg-item-h: 30px;
        --seg-fg: var(--text-muted);
        --seg-fg-hover: var(--text);
        --seg-fg-active: var(--text);
        --seg-thumb: var(--surface);
        --seg-thumb-shadow: 0 1px 2px color-mix(in oklch, var(--qct-ink) 10%, transparent), 0 0 0 1px color-mix(in oklch, var(--qct-ink) 4%, transparent);

        /* ---- pills (status badges, KPI meta) ---- */
        --pill-h: 20px;
        --pill-px: 8px;
        --pill-fs: var(--fs-xs);

        /* ---- motion (RESEARCH D6) ---- */
        --dur-1: 100ms;  /* hover, press, colour, checkbox */
        --dur-2: 150ms;  /* tooltip, menu, HTMX fade, exits */
        --dur-3: 200ms;  /* popover, dropdown, accordion */
        --dur-4: 250ms;  /* dialog, drawer */
        --ease-out: cubic-bezier(0.2, 0, 0, 1);
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
        --motion-shift: 4px;     /* popover/menu entry offset */
        --motion-shift-lg: 16px; /* drawer entry offset */
        --press-scale: 0.98;
        --enter-scale: 0.98;

        /* ---- dimensions ---- */
        --sidebar-w: 250px;
        --rail-w: 68px;
        --topbar-h: 56px;  /* phone: sticky bar (hamburger, title, search) */
        --tabs-h: 36px;    /* segmented area tabs */
        --control-h: 36px;
        --control-h-sm: 32px;
        --input-fs: var(--fs-base);
        --icon-sm: 16px;
        --icon: 17px;
        --nav-item-h: 34px;
        --row-h: 44px;     /* comfortable (default) */
        --cell-px: 12px;
        --cell-py: 11px;
        --content-max: 1600px;
        --content-max-dashboard: 1440px;
        --content-max-detail: 1200px;
        --form-max: 720px;
        --page-px: 32px;
        --page-py: 26px;
        --page-gap: 22px;  /* vertical rhythm of the sheet */
        --card-gap: 12px;  /* gap between tiles in a row */

        /* ---- icons (24px feather geometry). --i-* are MASKS: paint them with
           `background: currentColor; mask: var(--i-…) center / 16px no-repeat`,
           so the colour always comes from a token. --img-* are background
           images for elements that cannot host a pseudo-element. ---- */
        --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        --i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
        --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        --i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
        --i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
        --i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
        --i-selector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
        --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
        --i-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16 9 10.5 15 8 12.5'/%3E%3C/svg%3E");
        --i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
        --i-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
        --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
        --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        --i-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
        --img-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6965' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
        --img-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6965' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        --img-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6965' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");

        /* ---- stacking ---- */
        --z-sticky: 10;
        --z-topbar: 20;
        --z-frame: 25;   /* the fixed frame mask around the sheet (layout.css) */
        --z-sidebar: 30;
        --z-backdrop: 40;
        --z-drawer: 50;
        --z-popover: 60;
        --z-toast: 70;
        --z-skip: 100;

        /* ---- legacy aliases (pre-2026 names; orchestrator removes unused ones) ---- */
        --qct-brand-strong: var(--accent-700);
        --qct-brand-soft: var(--sb-active-bg);
        --qct-ink-soft: var(--text-secondary);
        --qct-ink-faint: var(--text-muted);
        --qct-line: var(--border);
        --qct-line-soft: var(--border-subtle);
        --qct-hairline: var(--border-subtle);
        --qct-surface: var(--surface);
        --qct-canvas-2: var(--surface-2);
        --qct-success: var(--success-solid);
        --qct-danger: var(--danger-solid);
        --qct-warning: var(--warning-solid);
        --qct-info: var(--info-solid);
        --qct-success-ink: var(--success-ink);
        --qct-danger-ink: var(--danger-ink);
        --qct-warning-ink: var(--warning-ink);
        --qct-info-ink: var(--info-ink);
        --qct-wash-success: var(--success-wash);
        --qct-wash-danger: var(--danger-wash);
        --qct-wash-warning: var(--warning-wash);
        --qct-wash-info: var(--info-wash);
        --qct-wash-amber: var(--accent-wash);
        --qct-font-text: var(--font-sans);
        --qct-radius: var(--r-lg);
        --qct-radius-lg: var(--r-xl);
        --qct-radius-sm: var(--r-md);
        --qct-radius-xs: var(--r-sm);
        --qct-radius-pill: var(--r-pill);
        --qct-shadow-xs: var(--e1);
        --qct-shadow-sm: var(--e1);
        --qct-shadow: var(--e0);
        --qct-shadow-md: var(--e2);
        --qct-shadow-lg: var(--e2);
        --qct-shadow-pop: var(--pop-shadow);
        --qct-ring-accent: 0 0 0 2px var(--focus);
        --qct-sidebar-width: var(--sidebar-w);
        --qct-header-height: var(--topbar-h);
        --qct-fs-display: var(--fs-kpi);
        --qct-fs-kpi: var(--fs-kpi);
        --qct-fs-h1: var(--fs-h1);
        --qct-fs-h2: var(--fs-title-sm);
        --qct-fs-body: var(--fs-base);
        --qct-fs-sm: var(--fs-sm);
        --qct-fs-xs: var(--fs-xs);
        --qct-lh-tight: 1.2;
        --qct-lh-body: 1.45;
        --qct-w-reg: var(--fw-regular);
        --qct-w-med: var(--fw-medium);
        --qct-w-semi: var(--fw-semibold);
        --qct-w-bold: var(--fw-bold);
        --qct-sp-1: var(--sp-1);
        --qct-sp-2: var(--sp-2);
        --qct-sp-3: var(--sp-3);
        --qct-sp-4: var(--sp-4);
        --qct-sp-5: var(--sp-5);
        --qct-sp-6: var(--sp-6);
        --qct-sp-8: var(--sp-8);
        --qct-sp-10: var(--sp-10);
    }

    /* Accent scale derived from the (tenant) brand colour — relative colour
       syntax keeps the lightness absolute, so every contrast pair above holds
       for any hue. Hex values above stay as the fallback. */
    @supports (color: oklch(from red l c h)) {
        :root {
            --accent-50: oklch(from var(--qct-brand) 0.985 calc(c * 0.09) calc(h + 5));
            --accent-100: oklch(from var(--qct-brand) 0.965 calc(c * 0.21) calc(h + 5));
            --accent-200: oklch(from var(--qct-brand) 0.93 calc(c * 0.44) calc(h + 4));
            --accent-300: oklch(from var(--qct-brand) 0.885 calc(c * 0.7) calc(h + 2));
            --accent-400: oklch(from var(--qct-brand) 0.83 calc(c * 0.944) calc(h + 1));
            --accent-600: oklch(from var(--qct-brand) 0.7 calc(c * 0.98) calc(h - 5));
            --accent-700: oklch(from var(--qct-brand) 0.6 calc(c * 0.87) calc(h - 11));
            --accent-800: oklch(from var(--qct-brand) 0.5 calc(c * 0.734) calc(h - 17));
            --accent-900: oklch(from var(--qct-brand) 0.41 calc(c * 0.594) calc(h - 20));
        }
    }

    /* Density: <html data-density="compact|comfortable"> (default comfortable). */
    :root[data-density='compact'] {
        --row-h: 36px;
        --cell-px: 10px;
        --cell-py: 7px;
    }

    /* Touch: 44px targets, 16px inputs (iOS would zoom below 16px). */
    @media (pointer: coarse) {
        :root {
            --control-h: 44px;
            --control-h-sm: 44px;
            --nav-item-h: 44px;
            --seg-item-h: 38px;
            --input-fs: var(--fs-md);
        }
    }

    /* Sheet padding 26/32 · 24 · 16 (desktop / tablet / phone). */
    @media (max-width: 1199.98px) {
        :root {
            --page-px: 24px;
            --page-py: 22px;
        }
    }
    @media (max-width: 767.98px) {
        :root {
            --page-px: 16px;
            --page-py: 16px;
            --page-gap: 16px;
            --fs-h1: 1.5rem;
            --lh-h1: 1.75rem;
            --fs-kpi: 1.5rem;
            --lh-kpi: 1.75rem;
        }
    }

    /* Reduced motion: keep fades (≤100ms), drop movement and zoom. */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --dur-2: 100ms;
            --dur-3: 100ms;
            --dur-4: 100ms;
            --motion-shift: 0px;
            --motion-shift-lg: 0px;
            --press-scale: 1;
            --enter-scale: 1;
        }
    }
}