/**
 * Arrow design tokens.
 *
 * Every colour, size and surface in Arrow comes from these custom properties.
 * Components never hard-code colours; they reference a token. Dark mode is a
 * token swap: follows the OS by default, or is forced with
 * <html data-theme="light|dark"> (set by the user toggle).
 *
 * Vocabulary colours (--a-v-*) carry business meaning users already recognise
 * from Archer (opportunity types, flags, banners, confidence). See
 * docs/style-normalization.md before changing them.
 */

:root {
	color-scheme: light;

	/* Typography */
	--a-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--a-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--a-fs-xs: 11px;
	--a-fs-sm: 12px;
	--a-fs: 13px;
	--a-fs-md: 14px;
	--a-fs-lg: 16px;
	--a-fs-xl: 20px;
	--a-fs-xxl: 26px;
	--a-lh: 1.45;

	/* Spacing (4px grid) */
	--a-sp-1: 4px;
	--a-sp-2: 8px;
	--a-sp-3: 12px;
	--a-sp-4: 16px;
	--a-sp-5: 20px;
	--a-sp-6: 24px;
	--a-sp-8: 32px;

	/* Shape */
	--a-radius-sm: 4px;
	--a-radius: 6px;
	--a-radius-lg: 10px;
	--a-radius-pill: 999px;

	/* Shell geometry */
	--a-topbar-h: 48px;
	--a-sidebar-w: 236px;
	--a-sidebar-w-collapsed: 56px;
	--a-pagehead-h: 52px;
	--a-panel-w: 520px;
	--a-aside-w: 360px;
	--a-control-h: 30px;
	--a-control-h-sm: 24px;

	/* Motion */
	--a-ease: cubic-bezier(.2, .7, .2, 1);
	--a-dur: 160ms;

	/* Brand (from the Archer bullseye logo) */
	--a-brand: #c8161d;
	--a-brand-ink: #1b1b1b;

	/* Surfaces & text */
	--a-canvas: #f2f4f7;
	--a-surface: #ffffff;
	--a-surface-2: #f8fafc;
	--a-surface-3: #eef2f6;
	--a-surface-hover: #f1f5fb;
	--a-border: #dde3ea;
	--a-border-strong: #c5cfdb;
	--a-text: #1b2533;
	--a-text-muted: #5b6878;
	--a-text-subtle: #8591a1;
	--a-text-inverse: #ffffff;

	/* Interactive */
	--a-accent: #1f6feb;
	--a-accent-hover: #1a5fd0;
	--a-accent-soft: #e8f0fe;
	--a-accent-border: #a9c5f5;
	--a-on-accent: #ffffff;
	--a-focus-ring: 0 0 0 3px rgba(31, 111, 235, .35);
	--a-link: #1a5fd0;

	/* Status */
	--a-success: #15803d;
	--a-success-soft: #e7f6ec;
	--a-success-border: #a7dcb8;
	--a-danger: #d42a2a;
	--a-danger-soft: #fdecec;
	--a-danger-border: #f2b3b3;
	--a-warning: #b26a00;
	--a-warning-soft: #fff5e0;
	--a-warning-border: #f3d18f;
	--a-info: #0b72a8;
	--a-info-soft: #e6f3fa;
	--a-info-border: #a6d3ea;
	--a-highlight: #fff6bf;
	--a-highlight-border: #eedc72;
	--a-linked: #b44fd4;
	--a-linked-soft: #f6eafb;

	/* Tables */
	--a-row-hover: #eaf1fd;
	--a-row-selected: #dde9fc;
	--a-row-stripe: #fafbfd;
	--a-th-bg: #f4f6f9;

	/* App chrome (topbar + sidebar) */
	--a-chrome: #0f1f36;
	--a-chrome-border: #1d314f;
	--a-chrome-text: #e7edf5;
	--a-chrome-muted: #93a4bb;
	--a-chrome-input: #1a2d49;
	--a-nav: #142540;
	--a-nav-text: #c7d2e1;
	--a-nav-hover: #1d3355;
	--a-nav-active: #24406a;
	--a-nav-active-text: #ffffff;
	--a-nav-group: #7d91ab;

	/* Elevation */
	--a-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
	--a-shadow-2: 0 4px 14px rgba(16, 24, 40, .10);
	--a-shadow-3: 0 16px 40px rgba(16, 24, 40, .22);
	--a-scrim: rgba(10, 18, 32, .45);

	/* Charts (categorical order, colour-blind aware) */
	--a-chart-1: #1f6feb;
	--a-chart-2: #e8830c;
	--a-chart-3: #1a9e6e;
	--a-chart-4: #c8161d;
	--a-chart-5: #7c4dd6;
	--a-chart-6: #0b9fb5;
	--a-chart-grid: #e6eaf0;

	/* ---- Vocabulary: opportunity types / flags (tags + banners) ---- */
	--a-v-viewed-bg: #d3d3d3;   --a-v-viewed-fg: #4a4a4a;
	--a-v-forward-bg: #48aeb3;  --a-v-forward-fg: #ffffff;
	--a-v-bookmark-bg: #e11d1d; --a-v-bookmark-fg: #ffffff;
	--a-v-linked-bg: #cc6ce7;   --a-v-linked-fg: #ffffff;
	--a-v-downvote-bg: #111111; --a-v-downvote-fg: #ffffff;
	--a-v-more-bg: #1d3fe0;     --a-v-more-fg: #ffffff;
	--a-v-cyber-bg: #ffc300;    --a-v-cyber-fg: #1b1b1b;
	--a-v-services-bg: #a52a2a; --a-v-services-fg: #ffffff;
	--a-v-stop-bg: #8b0000;     --a-v-stop-fg: #ffffff;
	--a-v-dso-bg: #a569bd;      --a-v-dso-fg: #ffffff;
	--a-v-hw-bg: #8d6f64;       --a-v-hw-fg: #ffffff;
	--a-v-renew-bg: #05ac49;    --a-v-renew-fg: #ffffff;
	--a-v-cloud-bg: #d8d8d8;    --a-v-cloud-fg: #1b1b1b;
	--a-v-comms-bg: #4ea4a8;    --a-v-comms-fg: #ffffff;
	--a-v-assigned-bg: #05ac49; --a-v-assigned-fg: #ffffff;
	--a-v-soft-bg: #dec997;     --a-v-soft-fg: #1b1b1b;
	--a-v-medical-bg: #a7e5fa;  --a-v-medical-fg: #1b1b1b;
	--a-v-av-bg: #f772e6;       --a-v-av-fg: #1b1b1b; /* Audio/Visual (AV) */
	--a-v-caution-bg: #f5b041;  --a-v-caution-fg: #1b1b1b;
	--a-v-closed-bg: #000000;   --a-v-closed-fg: #ffffff;
	--a-v-archive-bg: #d3d3d3;  --a-v-archive-fg: #1b1b1b;

	/* ---- Vocabulary: confidence (archer_format_confidence) ---- */
	--a-score-rfi: #c026d3;
	--a-score-priority: #e2431f;
	--a-score-interesting: #2776f5;
	--a-score-critical: #d42a2a;
	--a-score-high: #e5641c;
	--a-score-viable: #c026d3;
	--a-score-fair: #1f9d3a;
	--a-score-low: #2b8fd0;
	--a-score-poor: #0f9c8c;
	--a-score-fail: #8e55a8;

	/* ---- Vocabulary: quote status (archer_check_quote_status) ---- */
	--a-quote-won: #b59a00;
	--a-quote-quote: #15803d;
	--a-quote-nobid: #d42a2a;
}

/* Dark tokens, applied when the OS prefers dark and the user hasn't forced light… */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--a-canvas: #0c1422;
		--a-surface: #121c2d;
		--a-surface-2: #16223a;
		--a-surface-3: #1b2942;
		--a-surface-hover: #1a2740;
		--a-border: #26344d;
		--a-border-strong: #34466a;
		--a-text: #e4eaf3;
		--a-text-muted: #9dabc0;
		--a-text-subtle: #74839a;
		--a-accent: #4a8cf7;
		--a-accent-hover: #6aa1fa;
		--a-accent-soft: #17294a;
		--a-accent-border: #2c4d85;
		--a-link: #7eaefb;
		--a-focus-ring: 0 0 0 3px rgba(74, 140, 247, .45);
		--a-success: #3fbf6e;  --a-success-soft: #11291c; --a-success-border: #1f5a37;
		--a-danger: #f06464;   --a-danger-soft: #2e1417;  --a-danger-border: #6b2a2e;
		--a-warning: #e8a53b;  --a-warning-soft: #2c210e; --a-warning-border: #6a4d1c;
		--a-info: #47b1e6;     --a-info-soft: #0f2533;    --a-info-border: #1e4d66;
		--a-highlight: #3a3514; --a-highlight-border: #6b6122;
		--a-linked: #d68cf0;   --a-linked-soft: #2a1733;
		--a-row-hover: #1a2a45;
		--a-row-selected: #203459;
		--a-row-stripe: #131e31;
		--a-th-bg: #16223a;
		--a-chrome: #09111f;
		--a-chrome-border: #1a2944;
		--a-chrome-input: #13213a;
		--a-nav: #0d1729;
		--a-nav-hover: #16253f;
		--a-nav-active: #1f3760;
		--a-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
		--a-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
		--a-shadow-3: 0 16px 40px rgba(0, 0, 0, .6);
		--a-scrim: rgba(0, 0, 0, .6);
		--a-chart-grid: #26344d;
		--a-v-viewed-bg: #4a4f57; --a-v-viewed-fg: #e4e6ea;
		--a-v-archive-bg: #4a4f57; --a-v-archive-fg: #e4e6ea;
		--a-v-cloud-bg: #5b6069;  --a-v-cloud-fg: #f2f3f5;
		--a-v-downvote-bg: #2b2f36;
		--a-v-closed-bg: #2b2f36;
	}
}

/* …or when the user explicitly picks dark. Keep in sync with the block above. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--a-canvas: #0c1422;
	--a-surface: #121c2d;
	--a-surface-2: #16223a;
	--a-surface-3: #1b2942;
	--a-surface-hover: #1a2740;
	--a-border: #26344d;
	--a-border-strong: #34466a;
	--a-text: #e4eaf3;
	--a-text-muted: #9dabc0;
	--a-text-subtle: #74839a;
	--a-accent: #4a8cf7;
	--a-accent-hover: #6aa1fa;
	--a-accent-soft: #17294a;
	--a-accent-border: #2c4d85;
	--a-link: #7eaefb;
	--a-focus-ring: 0 0 0 3px rgba(74, 140, 247, .45);
	--a-success: #3fbf6e;  --a-success-soft: #11291c; --a-success-border: #1f5a37;
	--a-danger: #f06464;   --a-danger-soft: #2e1417;  --a-danger-border: #6b2a2e;
	--a-warning: #e8a53b;  --a-warning-soft: #2c210e; --a-warning-border: #6a4d1c;
	--a-info: #47b1e6;     --a-info-soft: #0f2533;    --a-info-border: #1e4d66;
	--a-highlight: #3a3514; --a-highlight-border: #6b6122;
	--a-linked: #d68cf0;   --a-linked-soft: #2a1733;
	--a-row-hover: #1a2a45;
	--a-row-selected: #203459;
	--a-row-stripe: #131e31;
	--a-th-bg: #16223a;
	--a-chrome: #09111f;
	--a-chrome-border: #1a2944;
	--a-chrome-input: #13213a;
	--a-nav: #0d1729;
	--a-nav-hover: #16253f;
	--a-nav-active: #1f3760;
	--a-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
	--a-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
	--a-shadow-3: 0 16px 40px rgba(0, 0, 0, .6);
	--a-scrim: rgba(0, 0, 0, .6);
	--a-chart-grid: #26344d;
	--a-v-viewed-bg: #4a4f57; --a-v-viewed-fg: #e4e6ea;
	--a-v-archive-bg: #4a4f57; --a-v-archive-fg: #e4e6ea;
	--a-v-cloud-bg: #5b6069;  --a-v-cloud-fg: #f2f3f5;
	--a-v-downvote-bg: #2b2f36;
	--a-v-closed-bg: #2b2f36;
}