/* ============================================================
   IXXO Cart 8 — shop admin design tokens (light; ixxocart.com brand)
   The only place, with the other css/<area>/tokens.css files, that holds raw colour
   values (tests/Unit/Engine/Ui/CssRulesTest.php). A redesign edits this file.
   ============================================================ */
:root{
	color-scheme: light;

	--font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* surfaces and ink: navy ink, cool slate neutrals */
	--canvas: #f6f8fc;
	--surface: #ffffff;
	--surface-2: #f6f8fc;
	--surface-3: #eef2f8;
	--line: #e4e9f2;
	--line-strong: #cfd7e6;
	--ink: #1b2c46;
	--ink-2: #5b6b85;
	--ink-3: #6b7a93;
	--ink-inverse: #ffffff;

	/* sidebar: the navy of the website's top bar */
	--side-bg: #16273f;
	--side-ink: #dbe3ef;
	--side-ink-2: #93a3bd;
	--side-ink-strong: #ffffff;
	--side-hover: rgba(255, 255, 255, 0.06);
	--side-active: rgba(255, 255, 255, 0.1);
	--side-line: rgba(255, 255, 255, 0.08);
	--side-count: rgba(255, 255, 255, 0.08);
	--side-focus: rgba(246, 146, 30, 0.75);
	--side-scroll: rgba(255, 255, 255, 0.15);

	/* brand */
	--primary: #1f3252;
	--primary-hover: #16273f;
	--primary-press: #0f1d31;
	--primary-soft: #e8eef8;
	--primary-soft-ink: #294064;
	--on-primary: #ffffff;
	--accent: #d8690f;
	--accent-strong: #b6550a;
	--accent-soft: #fcefe2;
	--accent-ink: #a64d08;
	--on-accent: #ffffff;
	--logo-orange: #f6921e;

	/* semantic, same hues as the website */
	--success: #2f855a;
	--success-soft: #e6f4ec;
	--success-ink: #276e4b;
	--warning: #d99a1e;
	--warning-soft: #fcf0d8;
	--warning-ink: #8f5a08;
	--danger: #c2415c;
	--danger-hover: #a8324c;
	--danger-soft: #fce7ec;
	--danger-ink: #a8324c;
	--on-danger: #ffffff;
	--info: #2563c9;
	--info-soft: #e8f0fe;
	--info-ink: #1f55ad;

	--focus: rgba(37, 99, 201, 0.55);
	--scrim: rgba(12, 23, 41, 0.5);
	--switch-knob: #ffffff;

	/* chart series (bars and lines, in series order) and gridlines; each series at least 3:1 on white */
	--ic-chart-1: #1f3252;
	--ic-chart-2: #d8690f;
	--ic-chart-3: #5b8def;
	--ic-chart-4: #2f855a;
	--ic-chart-grid: #e4e9f2;

	/* environment bar (the Console uses it; the admin shows none) */
	--env-bg: #f08a3a;
	--env-ink: #1a0e04;

	/* type scale: ratio ~1.2, fixed rem */
	--t-11: 0.6875rem;
	--t-12: 0.75rem;
	--t-13: 0.8125rem;
	--t-14: 0.875rem;
	--t-16: 1rem;
	--t-18: 1.125rem;
	--t-20: 1.25rem;
	--t-22: 1.375rem;
	--t-28: 1.75rem;
	--t-body: var(--t-14);
	--t-title: var(--t-22);

	/* spacing: 4px grid */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;

	/* radius: "IXXO touches" — squarer than the first mockup (spec §8) */
	--r-xs: 3px;
	--r-sm: 4px;
	--r-md: 4px;
	--r-lg: 6px;
	--r-pill: 999px;

	/* elevation: only for things that float */
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-pop: 0 1px 3px rgba(16, 24, 40, 0.08), 0 10px 24px -12px rgba(16, 24, 40, 0.22);
	--shadow-modal: 0 24px 50px -24px rgba(12, 23, 41, 0.38);
	--shadow-dock: 0 -10px 24px -18px rgba(16, 24, 40, 0.35);
	--shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.2);

	/* controls */
	--h-sm: 30px;
	--h-md: 36px;
	--h-lg: 44px;

	/* frame */
	--sidebar-width: 252px;
	--content-max: 1360px;
	--settings-max: 880px;

	/* motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 120ms;
	--dur: 180ms;
	--dur-slow: 240ms;
	/* page loading (spec §3.4): blocks rise over --dur-page, table rows over --dur-page-row, the outline shimmers once per --dur-shimmer */
	--ease-page: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-page: 600ms;
	--dur-page-row: 500ms;
	--dur-shimmer: 1.3s;

	/* layers */
	--z-sticky: 10;
	--z-drawer: 30;
	--z-pop: 40;
	--z-modal: 50;
	--z-toast: 60;
}