/* Design standard tokens: the Cursor look the owner chose (2026-10-27) - a neutral palette with
   one accent, light and dark, a five-size type ramp, a 4 px spacing scale, three radius tiers and
   no shadows. Use these variables only; never a raw colour, size or radius in a page's own CSS.
   --border draws quiet hairlines; --control-border draws a field's edge, which must be seen (3:1).
   design-kit.mjs sets the two accent values below. */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/inter-latin-wght.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+200C-200F, U+FDFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+200C-200F, U+FDFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+200C-200F, U+FDFC;
}

:root {
	--accent-light: #2563eb;
	--accent-dark: #4c8dff;

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

	--text-xs: 12px;
	--text-sm: 13px;
	--text-md: 14px;
	--text-lg: 16px;
	--text-xl: 22px;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-full: 999px;

	--control: 36px;
	--bar: 56px;
	--sidebar: 232px;
	--content: 1120px;
	--duration: 150ms;

	color-scheme: light;
	--bg: #ffffff;
	--bg-subtle: #fafafa;
	--surface: #ffffff;
	--surface-hover: #f4f4f5;
	--border: #e7e7ea;
	--control-border: #8b8b93;
	--text: #18181b;
	--text-secondary: #71717a;
	--ink: #18181b;
	--on-ink: #ffffff;
	--accent: var(--accent-light);
	--danger: #c81e1e;
	--danger-bg: #fdecec;
	--success: #15803d;
	--success-bg: #eef8f1;
	--warning: #a3410a;
	--warning-bg: #fdf1e7;
	--scrim: rgb(0 0 0 / 40%);
}

@media (max-width: 760px) {
	:root {
		--control: 40px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0b0b0c;
		--bg-subtle: #0b0b0c;
		--surface: #111113;
		--surface-hover: #17171a;
		--border: #232327;
		--control-border: #66666e;
		--text: #ededef;
		--text-secondary: #8b8b93;
		--ink: #ededef;
		--on-ink: #0b0b0c;
		--accent: var(--accent-dark);
		--danger: #ff8a8a;
		--danger-bg: #3a1d1f;
		--success: #6fd19b;
		--success-bg: #16261c;
		--warning: #f5b454;
		--warning-bg: #33260f;
		--scrim: rgb(0 0 0 / 60%);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0b0b0c;
	--bg-subtle: #0b0b0c;
	--surface: #111113;
	--surface-hover: #17171a;
	--border: #232327;
	--control-border: #66666e;
	--text: #ededef;
	--text-secondary: #8b8b93;
	--ink: #ededef;
	--on-ink: #0b0b0c;
	--accent: var(--accent-dark);
	--danger: #ff8a8a;
	--danger-bg: #3a1d1f;
	--success: #6fd19b;
	--success-bg: #16261c;
	--warning: #f5b454;
	--warning-bg: #33260f;
	--scrim: rgb(0 0 0 / 60%);
}