/* ============================================================
   IXXO Cart 8 — Platform Console design tokens (light, one theme)
   The console must never be mistaken for a shop's admin: neutral grey
   instead of blue-grey, orange actions, IBM Plex everywhere, denser rows.
   ============================================================ */
:root{
	color-scheme: light;

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

	--canvas: #f2f3f5;
	--surface: #ffffff;
	--surface-2: #f7f8f9;
	--surface-3: #eceef1;
	--line: #e1e4e8;
	--line-strong: #cdd2d9;
	--ink: #16181d;
	--ink-2: #4f5663;
	--ink-3: #6b7280;
	--ink-inverse: #ffffff;

	/* the console has no sidebar; the values keep the component CSS complete */
	--side-bg: #16181d;
	--side-ink: #eceef1;
	--side-ink-2: #9aa1ad;
	--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(240, 138, 58, 0.75);
	--side-scroll: rgba(255, 255, 255, 0.15);

	/* IXXO orange carries actions in the console */
	--primary: #b8560b;
	--primary-hover: #a14a08;
	--primary-press: #8c4007;
	--primary-soft: rgba(216, 105, 15, 0.1);
	--primary-soft-ink: #a14a08;
	--on-primary: #ffffff;
	--accent: #b8560b;
	--accent-strong: #a14a08;
	--accent-soft: rgba(216, 105, 15, 0.1);
	--accent-ink: #a14a08;
	--on-accent: #ffffff;
	--logo-orange: #f6921e;

	--success: #1d8a54;
	--success-soft: rgba(29, 138, 84, 0.1);
	--success-ink: #1d8a54;
	--warning: #b7791f;
	--warning-soft: rgba(217, 154, 30, 0.14);
	--warning-ink: #8f5a08;
	--danger: #cc334e;
	--danger-hover: #b02a42;
	--danger-soft: rgba(204, 51, 78, 0.1);
	--danger-ink: #cc334e;
	--on-danger: #ffffff;
	--info: #2563c9;
	--info-soft: rgba(37, 99, 201, 0.1);
	--info-ink: #2563c9;

	--focus: rgba(216, 105, 15, 0.55);
	--scrim: rgba(16, 18, 24, 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: #3a4150;
	--ic-chart-2: #b8560b;
	--ic-chart-3: #2563c9;
	--ic-chart-4: #1d8a54;
	--ic-chart-grid: #e1e4e8;

	--env-bg: #f08a3a;
	--env-ink: #1a0e04;

	--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-13);
	--t-title: var(--t-20);

	--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;

	--r-xs: 2px;
	--r-sm: 2px;
	--r-md: 4px;
	--r-lg: 6px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.04);
	--shadow-pop: 0 1px 3px rgba(16, 18, 24, 0.08), 0 10px 24px -12px rgba(16, 18, 24, 0.22);
	--shadow-modal: 0 24px 50px -24px rgba(16, 18, 24, 0.38);
	--shadow-dock: 0 -10px 24px -18px rgba(16, 18, 24, 0.35);
	--shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.2);

	/* denser controls than the shop admin */
	--h-sm: 26px;
	--h-md: 32px;
	--h-lg: 38px;

	--sidebar-width: 0px;
	--content-max: 1640px;
	--settings-max: 880px;

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 100ms;
	--dur: 150ms;
	--dur-slow: 200ms;
	/* the Console has no page-loading motion yet; the same names keep components.css whole */
	--ease-page: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-page: 600ms;
	--dur-page-row: 500ms;
	--dur-shimmer: 1.3s;

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