/*
 * VENDEMI Core design tokens.
 * This is the only file in the plugin that contains literal colour values.
 * Every component style must reference these custom properties.
 */

:root {
	--vendemi-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--vendemi-sidebar-expanded: 260px;
	--vendemi-sidebar-collapsed: 80px;
	--vendemi-sidebar-width: var(--vendemi-sidebar-expanded);
	--vendemi-sidebar-curve-x: 44px;
	--vendemi-sidebar-curve-y: 120px;

	--vendemi-radius-pill: 999px;
	--vendemi-radius-card: 20px;
	--vendemi-radius-row: 12px;
	--vendemi-radius-input: 14px;

	--vendemi-gap-xs: 6px;
	--vendemi-gap-sm: 12px;
	--vendemi-gap: 20px;
	--vendemi-gap-lg: 32px;

	--vendemi-main-padding-x: 40px;
	--vendemi-main-padding-y: 28px;
	--vendemi-search-height: 48px;
	--vendemi-content-max: 1520px;

	--vendemi-text-xs: 11px;
	--vendemi-text-sm: 12px;
	--vendemi-text-base: 13px;
	--vendemi-text-md: 15px;
	--vendemi-text-lg: 18px;
	--vendemi-text-xl: 24px;

	--vendemi-transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root,
[data-theme='light'] {
	--vendemi-bg: #f4f3f6;
	--vendemi-card-bg: #ffffff;
	--vendemi-surface-alt: #faf9fb;
	--vendemi-surface-sunken: #f1eff4;

	--vendemi-purple: #44574a;
	--vendemi-gold: #eab749;
	--vendemi-purple-soft: rgba(68, 87, 74, 0.18);
	--vendemi-purple-contrast: #ffffff;

	--vendemi-text: #000000;
	--vendemi-text-muted: rgba(0, 0, 0, 0.45);
	--vendemi-text-soft: rgba(0, 0, 0, 0.68);

	--vendemi-border: rgba(0, 0, 0, 0.07);
	--vendemi-border-strong: rgba(0, 0, 0, 0.14);

	--vendemi-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.05);
	--vendemi-shadow-heavy: 0 18px 48px rgba(0, 0, 0, 0.14);
	--vendemi-shadow-pill: 0 2px 8px rgba(0, 0, 0, 0.07);

	--vendemi-status-expired: #ff6b6b;
	--vendemi-status-soon: #ffb84d;
	--vendemi-status-outofstock: #f5a3a3;
	--vendemi-status-low: #f6c28b;
	--vendemi-status-ready: #8ce99a;

	--vendemi-rack-filled: #ff6b6b;
	--vendemi-rack-free: #51cf66;

	--vendemi-nav-active: var(--vendemi-bg);
	--vendemi-row-alt: #faf9fb;
	--vendemi-donut-track: #ff9c9c;
	--vendemi-donut-segment: #b8e6bd;
	--vendemi-grid-line: rgba(0, 0, 0, 0.1);
	--vendemi-scrim: rgba(20, 19, 22, 0.42);
}

[data-theme='dark'] {
	--vendemi-bg: #141316;
	--vendemi-card-bg: #201f24;
	--vendemi-surface-alt: #26252b;
	--vendemi-surface-sunken: #1a191d;

	--vendemi-purple: #44574a;
	--vendemi-gold: #eab749;
	--vendemi-purple-soft: rgba(68, 87, 74, 0.28);
	--vendemi-purple-contrast: #ffffff;

	--vendemi-text: #ffffff;
	--vendemi-text-muted: rgba(255, 255, 255, 0.5);
	--vendemi-text-soft: rgba(255, 255, 255, 0.74);

	--vendemi-border: rgba(255, 255, 255, 0.08);
	--vendemi-border-strong: rgba(255, 255, 255, 0.18);

	--vendemi-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
	--vendemi-shadow-heavy: 0 18px 48px rgba(0, 0, 0, 0.66);
	--vendemi-shadow-pill: 0 2px 8px rgba(0, 0, 0, 0.45);

	--vendemi-status-expired: #ff6b6b;
	--vendemi-status-soon: #ffb84d;
	--vendemi-status-outofstock: #f5a3a3;
	--vendemi-status-low: #f6c28b;
	--vendemi-status-ready: #8ce99a;

	--vendemi-rack-filled: #ff8787;
	--vendemi-rack-free: #69db7c;

	--vendemi-nav-active: var(--vendemi-bg);
	--vendemi-row-alt: #26252b;
	--vendemi-donut-track: #d96a6a;
	--vendemi-donut-segment: #7fc98a;
	--vendemi-grid-line: rgba(255, 255, 255, 0.12);
	--vendemi-scrim: rgba(0, 0, 0, 0.66);
}

[data-vendemi-collapsed='true'] {
	--vendemi-sidebar-width: var(--vendemi-sidebar-collapsed);
}