/*
 * CoolStuffGear theme tokens.
 * Comprehensive Dark Mode & Light Mode CSS Variables
 */

:root {
	--csg-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--csg-font-size-body: 16px;
	--csg-line-height-body: 1.5;
	--csg-font-size-small: 14px;
	--csg-font-size-h1: 32px;
	--csg-font-size-h2: 26px;
	--csg-font-size-h3: 22px;
	--csg-font-weight-regular: 400;
	--csg-font-weight-medium: 600;
	--csg-font-weight-bold: 700;

	--csg-space-1: 4px;
	--csg-space-2: 8px;
	--csg-space-3: 12px;
	--csg-space-4: 16px;
	--csg-space-5: 24px;
	--csg-space-6: 32px;
	--csg-space-7: 48px;

	--csg-radius-sm: 4px;
	--csg-radius-md: 6px;
	--csg-radius-lg: 8px;
	--csg-radius-pill: 999px;

	--csg-bg: #f6f8fb;
	--csg-surface: #ffffff;
	--csg-surface-card: #ffffff;
	--csg-surface-soft: #f8fafc;
	--csg-surface-muted: #eef2f6;
	--csg-text: #17202a;
	--csg-text-muted: #667085;
	--csg-border: #d8dee8;
	--csg-border-subtle: #f1f5f9;
	--csg-primary: #1769ff;
	--csg-primary-hover: #0e55d8;
	--csg-green: #00bc52;
	--csg-green-hover: #00a849;
	--csg-accent: #00a884;
	--csg-success: #16a34a;
	--csg-warning: #f59e0b;
	--csg-danger: #dc2626;
	--csg-focus: #84b6ff;
	--csg-price: #0f172a;
}

[data-csg-theme="light"],
[data-theme="light"],
html[data-csg-theme="light"],
html[data-theme="light"] {
	--csg-bg: #f6f8fb;
	--csg-surface: #ffffff;
	--csg-surface-card: #ffffff;
	--csg-surface-soft: #f8fafc;
	--csg-surface-muted: #eef2f6;
	--csg-text: #17202a;
	--csg-text-muted: #667085;
	--csg-border: #d8dee8;
	--csg-border-subtle: #f1f5f9;
	--csg-primary: #1769ff;
	--csg-primary-hover: #0e55d8;
	--csg-green: #00bc52;
	--csg-green-hover: #00a849;
	--csg-accent: #00a884;
	--csg-success: #16a34a;
	--csg-warning: #f59e0b;
	--csg-danger: #dc2626;
	--csg-focus: #84b6ff;
	--csg-price: #0f172a;
}

[data-csg-theme="dark"],
[data-theme="dark"],
html[data-csg-theme="dark"],
html[data-theme="dark"],
body.theme-dark {
	--csg-bg: #111418;
	--csg-surface: #181d23;
	--csg-surface-card: #181d23;
	--csg-surface-soft: #1e293b;
	--csg-surface-muted: #222933;
	--csg-text: #eef2f6;
	--csg-text-muted: #aab4c0;
	--csg-border: #323b47;
	--csg-border-subtle: #242f3d;
	--csg-primary: #6aa2ff;
	--csg-primary-hover: #8bb7ff;
	--csg-green: #00bc52;
	--csg-green-hover: #00e676;
	--csg-accent: #35d0a8;
	--csg-success: #4ade80;
	--csg-warning: #fbbf24;
	--csg-danger: #f87171;
	--csg-focus: #8bb7ff;
	--csg-price: #f8fafc;
}