/*
 * SellKit UI — design tokens
 * ---------------------------------------------------------------------------
 * shadcn/ui-style semantic tokens. Components only ever read these
 * variables, never raw colours, so dark mode is a token swap.
 *
 *   :root                         light set (default)
 *   :root[data-theme="dark"]      dark set
 *   :root[data-theme="system"]    dark set when the OS prefers dark
 *
 * data-theme is set before first paint by the inline head script printed
 * from functions.php (sellkit_ui_theme_head_script). See docs/ui-system.md.
 *
 * Contrast notes (WCAG AA): every *-foreground on its surface is >= 4.5:1;
 * --ring is >= 3:1 against --background and --card in both themes. --input
 * is >= 3:1 in light; in dark it is the owner-requested dimmed #3f3f46
 * (about 1.9:1), so dark inputs rely on the label + the 3px focus ring.
 *
 * Brand: SellKit violet #635cff is the --primary fill in both themes (white
 * text on it is 4.66:1). Text-coloured brand (--brand: links, eyebrows) is
 * #5850f2 in light and #9c97ff in dark so it stays >= 4.5:1 on every surface.
 */

/* ---------------------------------------------------------------------------
 * Light set. The extra selectors after :root are "light islands": legacy
 * (not yet redesigned) areas that are hard-coded for a light background keep
 * the light token set even when the rest of the UI is dark. A redesigned page
 * opts out by adding .ui-main (dashboard) or .ui-auth (auth) to its wrapper.
 * Pages with neither the app shell nor an auth layout (canvas, checkout,
 * not-allowed, 404) are light as a whole: body:not(:has(.ui-sidebar, .ui-auth)).
 * ------------------------------------------------------------------------ */
:root,
.ui-theme-light,
.sellkit-main-content:not(.ui-main),
.full-height-page:not(.ui-auth),
body:not(:has(.ui-main)) .artbees-modal,
body:not(:has(.ui-sidebar, .ui-auth)) {
	--background: #ffffff;
	--foreground: #0a0a0a;
	--card: #ffffff;
	--card-foreground: #0a0a0a;
	--popover: #ffffff;
	--popover-foreground: #0a0a0a;
	--primary: #635cff;
	--primary-foreground: #ffffff;
	--primary-hover: #524ae8;
	--contrast: #171717;
	--contrast-foreground: #fafafa;
	--secondary: #f4f4f5;
	--secondary-foreground: #171717;
	--secondary-hover: #e9e9eb;
	--muted: #f4f4f5;
	--muted-foreground: #63636b;
	--accent: #f4f4f5;
	--accent-foreground: #171717;
	--destructive: #dc2626;
	--destructive-foreground: #ffffff;
	--destructive-hover: #b91c1c;
	--border: #e4e4e7;
	--input: #8e8e96;
	--input-background: #ffffff;
	--ring: #635cff;
	--overlay: rgb(9 9 11 / 0.5);

	/* Brand (SellKit violet) — links, focus, highlights. Never large fills. */
	--brand: #5850f2;
	--brand-foreground: #ffffff;
	--brand-subtle: #efeeff;
	--brand-subtle-foreground: #4a42d6;

	/* Status — solid (badges/dots), subtle (alert/badge tint) */
	--success: #15803d;
	--success-foreground: #ffffff;
	--success-subtle: #ecfdf3;
	--success-subtle-foreground: #116530;
	--success-border: #a6e9c0;
	--warning: #b45309;
	--warning-foreground: #ffffff;
	--warning-subtle: #fffaeb;
	--warning-subtle-foreground: #93400b;
	--warning-border: #fcd98a;
	--info: #1d4ed8;
	--info-foreground: #ffffff;
	--info-subtle: #eff5ff;
	--info-subtle-foreground: #1e40af;
	--info-border: #b8d0fe;
	--danger-subtle: #fef2f2;
	--danger-subtle-foreground: #b42318;
	--danger-border: #fbc7c3;

	/* Charts */
	--chart-1: #635cff;
	--chart-2: #0d9488;
	--chart-3: #d97706;
	--chart-4: #2563eb;
	--chart-5: #db2777;


	/* Hues for icon tiles, nav icons, stat accents (see .ui-hue--*).
	   --hue-X is the saturated base (tint/border are derived from it);
	   --hue-X-fg is the icon/text stroke, darkened in light mode for contrast. */
	--hue-purple: #a855f7;  --hue-purple-fg: #7e22ce;
	--hue-violet: #8b5cf6;  --hue-violet-fg: #6d28d9;
	--hue-blue: #3b82f6;    --hue-blue-fg: #1d4ed8;
	--hue-sky: #0ea5e9;     --hue-sky-fg: #0369a1;
	--hue-teal: #14b8a6;    --hue-teal-fg: #0f766e;
	--hue-emerald: #10b981; --hue-emerald-fg: #047857;
	--hue-green: #22c55e;   --hue-green-fg: #15803d;
	--hue-amber: #f59e0b;   --hue-amber-fg: #b45309;
	--hue-orange: #f97316;  --hue-orange-fg: #c2410c;
	--hue-red: #ef4444;     --hue-red-fg: #b91c1c;
	--hue-pink: #ec4899;    --hue-pink-fg: #be185d;
	--hue-slate: #64748b;   --hue-slate-fg: #334155;
	--hue-tint: 10%;        /* tile background strength */
	--hue-edge: 28%;        /* tile border strength */

	/* Sidebar */
	--sidebar: #fafafa;
	--sidebar-foreground: #3f3f46;
	--sidebar-muted-foreground: #63636b;
	--sidebar-primary: #635cff;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #efeff1;
	--sidebar-accent-foreground: #09090b;
	--sidebar-border: #e4e4e7;
	--sidebar-ring: #635cff;

	/* Elevation */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
	--shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06);
	--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.22);

	--skeleton: #ececee;
	--skeleton-shine: #f6f6f7;

	color-scheme: light;
}

/* ---------------------------------------------------------------------------
 * Dark set (explicit choice)
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] {
	--background: #0a0a0b;
	--foreground: #fafafa;
	--card: #141416;
	--card-foreground: #fafafa;
	--popover: #18181b;
	--popover-foreground: #fafafa;
	--primary: #635cff;
	--primary-foreground: #ffffff;
	--primary-hover: #5750f0;
	--contrast: #ededed;
	--contrast-foreground: #18181b;
	--secondary: #232326;
	--secondary-foreground: #fafafa;
	--secondary-hover: #2e2e32;
	--muted: #1f1f22;
	--muted-foreground: #a1a1aa;
	--accent: #232326;
	--accent-foreground: #fafafa;
	--destructive: #dc2626;
	--destructive-foreground: #ffffff;
	--destructive-hover: #ef4444;
	--border: #27272a;
	--input: #3f3f46;
	--input-background: #111113;
	--ring: #8b86ff;
	--overlay: rgb(0 0 0 / 0.7);

	--brand: #9c97ff;
	--brand-foreground: #0a0a0b;
	--brand-subtle: #1b1940;
	--brand-subtle-foreground: #c3c0ff;

	--success: #22c55e;
	--success-foreground: #052e16;
	--success-subtle: #0c2318;
	--success-subtle-foreground: #6ee7a0;
	--success-border: #14532d;
	--warning: #f59e0b;
	--warning-foreground: #1f1300;
	--warning-subtle: #2a1d06;
	--warning-subtle-foreground: #fcd34d;
	--warning-border: #78350f;
	--info: #60a5fa;
	--info-foreground: #0b1730;
	--info-subtle: #0f1b33;
	--info-subtle-foreground: #93c5fd;
	--info-border: #1e3a8a;
	--danger-subtle: #2a1012;
	--danger-subtle-foreground: #fca5a5;
	--danger-border: #7f1d1d;

	--chart-1: #9c97ff;
	--chart-2: #2dd4bf;
	--chart-3: #fbbf24;
	--chart-4: #60a5fa;
	--chart-5: #f472b6;

	--hue-purple: #c084fc;  --hue-purple-fg: #d8b4fe;
	--hue-violet: #a78bfa;  --hue-violet-fg: #c4b5fd;
	--hue-blue: #60a5fa;    --hue-blue-fg: #93c5fd;
	--hue-sky: #38bdf8;     --hue-sky-fg: #7dd3fc;
	--hue-teal: #2dd4bf;    --hue-teal-fg: #5eead4;
	--hue-emerald: #34d399; --hue-emerald-fg: #6ee7b7;
	--hue-green: #4ade80;   --hue-green-fg: #86efac;
	--hue-amber: #fbbf24;   --hue-amber-fg: #fcd34d;
	--hue-orange: #fb923c;  --hue-orange-fg: #fdba74;
	--hue-red: #f87171;     --hue-red-fg: #fca5a5;
	--hue-pink: #f472b6;    --hue-pink-fg: #f9a8d4;
	--hue-slate: #94a3b8;   --hue-slate-fg: #cbd5e1;
	--hue-tint: 14%;
	--hue-edge: 32%;

	--sidebar: #0f0f11;
	--sidebar-foreground: #d4d4d8;
	--sidebar-muted-foreground: #a1a1aa;
	--sidebar-primary: #635cff;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #1f1f23;
	--sidebar-accent-foreground: #fafafa;
	--sidebar-border: #232326;
	--sidebar-ring: #8b86ff;

	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
	--shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.55);
	--shadow-lg: 0 14px 28px -6px rgb(0 0 0 / 0.6);
	--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7);

	--skeleton: #1f1f22;
	--skeleton-shine: #2a2a2e;

	color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Dark set (system preference). Keep in sync with the block above.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] {
		--background: #0a0a0b;
		--foreground: #fafafa;
		--card: #141416;
		--card-foreground: #fafafa;
		--popover: #18181b;
		--popover-foreground: #fafafa;
		--primary: #635cff;
		--primary-foreground: #ffffff;
		--primary-hover: #5750f0;
		--contrast: #ededed;
		--contrast-foreground: #18181b;
		--secondary: #232326;
		--secondary-foreground: #fafafa;
		--secondary-hover: #2e2e32;
		--muted: #1f1f22;
		--muted-foreground: #a1a1aa;
		--accent: #232326;
		--accent-foreground: #fafafa;
		--destructive: #dc2626;
		--destructive-foreground: #ffffff;
		--destructive-hover: #ef4444;
		--border: #27272a;
		--input: #3f3f46;
		--input-background: #111113;
		--ring: #8b86ff;
		--overlay: rgb(0 0 0 / 0.7);

		--brand: #9c97ff;
		--brand-foreground: #0a0a0b;
		--brand-subtle: #1b1940;
		--brand-subtle-foreground: #c3c0ff;

		--success: #22c55e;
		--success-foreground: #052e16;
		--success-subtle: #0c2318;
		--success-subtle-foreground: #6ee7a0;
		--success-border: #14532d;
		--warning: #f59e0b;
		--warning-foreground: #1f1300;
		--warning-subtle: #2a1d06;
		--warning-subtle-foreground: #fcd34d;
		--warning-border: #78350f;
		--info: #60a5fa;
		--info-foreground: #0b1730;
		--info-subtle: #0f1b33;
		--info-subtle-foreground: #93c5fd;
		--info-border: #1e3a8a;
		--danger-subtle: #2a1012;
		--danger-subtle-foreground: #fca5a5;
		--danger-border: #7f1d1d;

		--chart-1: #9c97ff;
		--chart-2: #2dd4bf;
		--chart-3: #fbbf24;
		--chart-4: #60a5fa;
		--chart-5: #f472b6;

		--hue-purple: #c084fc;  --hue-purple-fg: #d8b4fe;
		--hue-violet: #a78bfa;  --hue-violet-fg: #c4b5fd;
		--hue-blue: #60a5fa;    --hue-blue-fg: #93c5fd;
		--hue-sky: #38bdf8;     --hue-sky-fg: #7dd3fc;
		--hue-teal: #2dd4bf;    --hue-teal-fg: #5eead4;
		--hue-emerald: #34d399; --hue-emerald-fg: #6ee7b7;
		--hue-green: #4ade80;   --hue-green-fg: #86efac;
		--hue-amber: #fbbf24;   --hue-amber-fg: #fcd34d;
		--hue-orange: #fb923c;  --hue-orange-fg: #fdba74;
		--hue-red: #f87171;     --hue-red-fg: #fca5a5;
		--hue-pink: #f472b6;    --hue-pink-fg: #f9a8d4;
		--hue-slate: #94a3b8;   --hue-slate-fg: #cbd5e1;
		--hue-tint: 14%;
		--hue-edge: 32%;

		--sidebar: #0f0f11;
		--sidebar-foreground: #d4d4d8;
		--sidebar-muted-foreground: #a1a1aa;
		--sidebar-primary: #635cff;
		--sidebar-primary-foreground: #ffffff;
		--sidebar-accent: #1f1f23;
		--sidebar-accent-foreground: #fafafa;
		--sidebar-border: #232326;
		--sidebar-ring: #8b86ff;

		--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
		--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
		--shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.55);
		--shadow-lg: 0 14px 28px -6px rgb(0 0 0 / 0.6);
		--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7);

		--skeleton: #1f1f22;
		--skeleton-shine: #2a2a2e;

		color-scheme: dark;
	}
}

/* ---------------------------------------------------------------------------
 * Theme-independent tokens
 * ------------------------------------------------------------------------ */
:root {
	/* Type. Inter when the visitor has it installed, otherwise the platform
	   UI font. No web-font fetch (legacy style.css uses the system stack). */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--text-xs: 0.75rem;     /* 12 */
	--text-sm: 0.8125rem;   /* 13 */
	--text-base: 0.875rem;  /* 14 — body */
	--text-md: 1rem;        /* 16 */
	--text-lg: 1.125rem;    /* 18 */
	--text-xl: 1.25rem;     /* 20 */
	--text-2xl: 1.5rem;     /* 24 — page title */
	--text-3xl: 1.875rem;   /* 30 — auth title */
	--text-4xl: 2.25rem;    /* 36 — stat value */

	--leading-tight: 1.25;
	--leading-snug: 1.4;
	--leading-normal: 1.55;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--tracking-tight: -0.015em;
	--tracking-tighter: -0.025em;

	/* Spacing — 4px grid */
	--space-0: 0;
	--space-px: 1px;
	--space-0-5: 0.125rem;
	--space-1: 0.25rem;
	--space-1-5: 0.375rem;
	--space-2: 0.5rem;
	--space-2-5: 0.625rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Radius (shadcn: --radius drives the rest) */
	--radius: 0.625rem;                         /* 10 */
	--radius-sm: calc(var(--radius) - 4px);     /* 6  */
	--radius-md: calc(var(--radius) - 2px);     /* 8  */
	--radius-lg: var(--radius);                 /* 10 */
	--radius-xl: calc(var(--radius) + 4px);     /* 14 */
	--radius-full: 9999px;

	/* Controls */
	--control-h-sm: 2rem;    /* 32 */
	--control-h: 2.25rem;    /* 36 */
	--control-h-lg: 2.5rem;  /* 40 */
	--touch-target: 2.75rem; /* 44 */

	/* Focus ring */
	--ring-width: 2px;
	--ring-offset: 2px;
	--focus-ring: 0 0 0 var(--ring-offset) var(--background), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 120ms;
	--duration: 180ms;
	--duration-slow: 280ms;

	/* Layering */
	--z-sticky: 20;
	--z-sidebar: 900;
	--z-overlay: 1000;
	--z-dropdown: 1100;
	--z-modal: 1200;
	--z-toast: 1300;
	--z-tooltip: 1400;

	/* Layout */
	--sidebar-width: 16rem;          /* 256 */
	--sidebar-width-collapsed: 3.75rem; /* 60 */
	--topbar-h: 3.5rem;              /* 56 */
	--container: 75rem;              /* 1200 */
	--container-narrow: 45rem;       /* 720 */
	--container-wide: 90rem;         /* 1440 */
	--page-gutter: var(--space-8);
}

@media (max-width: 767px) {
	:root {
		--control-h-sm: var(--touch-target);
		--control-h: var(--touch-target);
		--control-h-lg: var(--touch-target);
		--page-gutter: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.01ms;
		--duration: 0.01ms;
		--duration-slow: 0.01ms;
	}
}