/*
 * QuoteRecon design system: tokens.
 * Canonical copy: theme assets/system. The plugin carries a byte-identical copy
 * so each package renders independently (verified by tests/system-sync).
 * html[data-theme] is resolved before first paint by the existing initializer.
 */
/* Latin subset (preloaded). The full file loads only when a page shows a character outside it, such as
 * accented or non-Latin text from an uploaded document; the two ranges never overlap. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/InterLatin.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/InterVariable.woff2") format("woff2");
	unicode-range: U+007F-009F, U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+219A-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC, U+FFFE-10FFFF;
}
/* Arial resized to Inter's metrics, so text keeps its line breaks if Inter arrives after first paint. */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica");
	size-adjust: 107.06%;
	ascent-override: 90.49%;
	descent-override: 22.56%;
	line-gap-override: 0%;
}

:root {
	color-scheme: light;

	/* Surfaces: a cool, faintly blue canvas taken from the brand mark */
	--q-bg: #f3f6fc;
	--q-bg-public: #fbfcfe;
	--q-surface: #ffffff;
	--q-surface-2: #f7f9fd;
	--q-surface-3: #edf1f8;
	--q-overlay: rgba(6, 14, 38, 0.5);

	/* Lines */
	--q-line: #e2e8f2;
	--q-line-strong: #c9d3e2;
	--q-line-input: #aeb9ca;

	/* Text */
	--q-text: #0a1530;
	--q-text-2: #3a4863;
	--q-text-3: #5d6b84;

	/* Brand and interaction (blue QR mark) */
	--q-accent: #1466f0;
	--q-accent-hover: #0b52d6;
	--q-accent-text: #0b5ce0;
	--q-accent-soft: #eaf2ff;
	--q-accent-line: #b9d2fb;
	--q-on-accent: #ffffff;
	--q-focus: #1466f0;
	--q-selected: #eaf2ff;
	/* Fills that carry white text keep 4.5:1 at every stop. */
	--q-grad: linear-gradient(115deg, #0b3fc4 0%, #1466f0 55%, #0a6fd8 100%);
	--q-grad-vivid: linear-gradient(115deg, #0b3fc4 0%, #1f74ff 50%, #12b8f5 100%);
	--q-grad-pro: linear-gradient(115deg, #3b12d9 0%, #7a22e8 50%, #a12ee0 100%);
	--q-grad-pro-vivid: linear-gradient(115deg, #3b12d9 0%, #8a2cff 52%, #ef6bff 100%);

	/* Finding semantics: foreground / tint / line */
	--q-diff: #b3243a;       --q-diff-bg: #fdf1f3;       --q-diff-line: #efc3cb;
	--q-missing: #975000;    --q-missing-bg: #fff5e6;    --q-missing-line: #f1d2a3;
	--q-extra: #6a3fbf;      --q-extra-bg: #f5f0fe;      --q-extra-line: #dacdf5;
	--q-review: #7f5b00;     --q-review-bg: #fff7d9;     --q-review-line: #e8d38c;
	--q-match: #12704a;      --q-match-bg: #ebf6f0;      --q-match-line: #bde2cd;
	--q-excluded: #536074;   --q-excluded-bg: #f0f3f6;   --q-excluded-line: #d5dce4;

	/* Lifecycle semantics (packs, AI freshness, notices) */
	--q-ok: var(--q-match);          --q-ok-bg: var(--q-match-bg);          --q-ok-line: var(--q-match-line);
	--q-warn: var(--q-missing);      --q-warn-bg: var(--q-missing-bg);      --q-warn-line: var(--q-missing-line);
	--q-danger: #b3243a;             --q-danger-bg: #fdf1f3;                --q-danger-line: #efc3cb;
	--q-info: var(--q-accent-text);  --q-info-bg: var(--q-accent-soft);     --q-info-line: var(--q-accent-line);
	--q-pro: #6d1fe0;                --q-pro-bg: #f3ecff;             --q-pro-line: #d9c4fb;

	/* Type */
	--q-font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--q-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
	--q-fs-2xs: 0.6875rem;  /* 11 */
	--q-fs-xs: 0.75rem;     /* 12 */
	--q-fs-sm: 0.8125rem;   /* 13 */
	--q-fs-md: 0.875rem;    /* 14px, application body */
	--q-fs-base: 1rem;      /* 16px, public body */
	--q-fs-lg: 1.125rem;    /* 18 */
	--q-fs-xl: 1.375rem;    /* 22 */
	--q-fs-2xl: 1.75rem;    /* 28 */
	--q-fs-3xl: clamp(2rem, 1.35rem + 2.2vw, 2.75rem);
	--q-fs-display: clamp(2.35rem, 1.3rem + 3.6vw, 3.75rem);
	--q-lh-tight: 1.2;
	--q-lh: 1.5;
	--q-lh-relaxed: 1.65;
	--q-tracking-tight: -0.02em;
	--q-tracking-display: -0.035em;

	/* Space (4px grid) */
	--q-1: 0.25rem; --q-2: 0.5rem; --q-3: 0.75rem; --q-4: 1rem; --q-5: 1.25rem;
	--q-6: 1.5rem; --q-8: 2rem; --q-10: 2.5rem; --q-12: 3rem; --q-16: 4rem; --q-20: 5rem; --q-24: 6rem;

	/* Shape */
	--q-r-xs: 4px;
	--q-r-sm: 7px;
	--q-r: 10px;
	--q-r-lg: 16px;
	--q-r-xl: 22px;
	--q-r-pill: 999px;

	/* Elevation */
	--q-shadow-1: 0 1px 2px rgba(10, 31, 82, 0.05);
	--q-shadow-card: 0 1px 2px rgba(10, 31, 82, 0.04), 0 12px 32px -20px rgba(10, 31, 82, 0.22);
	--q-shadow-lift: 0 2px 4px rgba(10, 31, 82, 0.05), 0 26px 50px -28px rgba(20, 102, 240, 0.4);
	--q-shadow-pop: 0 24px 48px -16px rgba(10, 31, 82, 0.28), 0 4px 10px rgba(10, 31, 82, 0.06);
	--q-shadow-sheet: 0 -12px 32px rgba(10, 31, 82, 0.16);
	--q-glass: rgba(255, 255, 255, 0.78);

	/* Layout */
	--q-header-h: 3.5rem;
	--q-app-max: 90rem;
	--q-public-max: 75rem;
	--q-reading: 68ch;
	--q-gutter: clamp(1rem, 0.4rem + 2.2vw, 2rem);
	--q-control-h: 2.25rem;
	--q-control-h-lg: 2.75rem;
	--q-touch: 2.75rem;

	/* Motion */
	--q-dur-1: 120ms;
	--q-dur-2: 200ms;
	--q-dur-3: 320ms;
	--q-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--q-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--q-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
}

html[data-theme="dark"] {
	color-scheme: dark;
	--q-bg: #060a15;
	--q-bg-public: #050914;
	--q-surface: #0c1322;
	--q-surface-2: #0a101d;
	--q-surface-3: #141d31;
	--q-overlay: rgba(1, 4, 12, 0.72);
	--q-line: #1b263b;
	--q-line-strong: #2b3a57;
	--q-line-input: #3b4f73;
	--q-text: #eaf0fb;
	--q-text-2: #b3c0d8;
	--q-text-3: #8796b1;
	--q-accent: #4d9bff;
	--q-accent-hover: #7cb6ff;
	--q-accent-text: #82b8ff;
	--q-accent-soft: rgba(77, 155, 255, 0.13);
	--q-accent-line: rgba(77, 155, 255, 0.38);
	--q-on-accent: #031121;
	--q-focus: #7cb6ff;
	--q-selected: rgba(77, 155, 255, 0.11);
	--q-diff: #ff8b99;     --q-diff-bg: rgba(255, 139, 153, 0.09);     --q-diff-line: rgba(255, 139, 153, 0.32);
	--q-missing: #f3b25e;  --q-missing-bg: rgba(243, 178, 94, 0.09);   --q-missing-line: rgba(243, 178, 94, 0.32);
	--q-extra: #bfa3ff;    --q-extra-bg: rgba(191, 163, 255, 0.1);     --q-extra-line: rgba(191, 163, 255, 0.32);
	--q-review: #efcf6c;   --q-review-bg: rgba(239, 207, 108, 0.09);   --q-review-line: rgba(239, 207, 108, 0.34);
	--q-match: #5fcf98;    --q-match-bg: rgba(95, 207, 152, 0.09);     --q-match-line: rgba(95, 207, 152, 0.3);
	--q-excluded: #9aa8b9; --q-excluded-bg: rgba(154, 168, 185, 0.09); --q-excluded-line: rgba(154, 168, 185, 0.28);
	--q-danger: #ff8b99;   --q-danger-bg: rgba(255, 139, 153, 0.09);   --q-danger-line: rgba(255, 139, 153, 0.32);
	--q-pro: #c6a6ff;      --q-pro-bg: rgba(170, 120, 255, 0.13);     --q-pro-line: rgba(190, 150, 255, 0.34);
	--q-shadow-1: none;
	--q-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.85);
	--q-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -30px rgba(31, 116, 255, 0.45);
	--q-shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
	--q-glass: rgba(12, 19, 34, 0.78);
	--q-shadow-sheet: 0 -12px 32px rgba(0, 0, 0, 0.5);
}

/* An explicit appearance change animates colour only; never on first paint. */
html.qr-theme-transition body,
html.qr-theme-transition :is(.qr-shell-header, .qr-shell-footer, .qr-app) {
	transition: background-color var(--q-dur-2) var(--q-ease), color var(--q-dur-2) var(--q-ease), border-color var(--q-dur-2) var(--q-ease);
}

@media (prefers-reduced-motion: reduce) {
	:root { --q-dur-1: 0ms; --q-dur-2: 0ms; --q-dur-3: 0ms; }
	html.qr-theme-transition body,
	html.qr-theme-transition :is(.qr-shell-header, .qr-shell-footer, .qr-app) { transition: none; }
}

/* Touch screens: standard controls grow to a 44px target; compact controls to 36px. */
@media (pointer: coarse) {
	:root { --q-control-h: var(--q-touch); }
}