/* Tawasul design tokens — aligned to the nkelani-studio (nkelani.net) theme:
   cinematic dark inks, metallic silver/teal actions, gold + copper accents,
   Space Grotesk / Inter / Cairo, 10px + 18px radii. */

:root {
	/* Brand surfaces — nkelani.net ink ramp */
	--tk-ink: #080B13;
	--tk-ink-soft: #11192B;
	--tk-ink-line: rgba(236, 234, 230, .1);
	--tk-surface: #05070D;
	--tk-surface-2: #0C1220;
	--tk-surface-3: #11192B;
	--tk-card: #0B101E;
	--tk-field: #0E1522;
	--tk-text: #ECEAE6;
	--tk-text-soft: #A9B0BE;
	--tk-text-faint: #79818F;
	--tk-on-ink: #ECEAE6;
	--tk-on-ink-soft: #A9B0BE;

	/* Actions — metallic silver/teal replaces green (site-wide rule) */
	--tk-green: #A9B3BF;
	--tk-green-dark: #5B6570;
	--tk-green-soft: rgba(169, 179, 191, .14);
	--tk-accent: #E8B86D;
	--tk-accent-2: #C8956C;

	/* Feedback */
	--tk-info: #7DA7F5;
	--tk-info-soft: rgba(125, 167, 245, .16);
	--tk-warn: #F0C987;
	--tk-warn-soft: rgba(240, 201, 135, .16);
	--tk-danger: #E27A6A;
	--tk-danger-soft: rgba(226, 122, 106, .16);

	/* Radii, spacing, elevation — theme radii */
	--tk-r-sm: 10px;
	--tk-r-md: 18px;
	--tk-r-lg: 26px;
	--tk-r-pill: 999px;
	--tk-s-1: 4px;
	--tk-s-2: 8px;
	--tk-s-3: 14px;
	--tk-s-4: 22px;
	--tk-s-5: 34px;
	--tk-s-6: 56px;
	--tk-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--tk-shadow-2: 0 24px 60px rgba(0, 0, 0, .55);

	/* Type — nkelani.net fonts */
	--tk-font-display: "Space Grotesk", "Cairo", "Inter", sans-serif;
	--tk-font-body: "Inter", "Cairo", system-ui, -apple-system, sans-serif;

	/* Layout */
	--tk-shell: 1180px;
	--tk-topbar: 64px;
	--tk-sidebar: 250px;
}

[dir="rtl"] {
	--tk-font-display: "Cairo", "Space Grotesk", "Inter", sans-serif;
	--tk-font-body: "Cairo", "Inter", system-ui, sans-serif;
}

/* Day mode — mirrors the nkelani-studio theme's light scheme. The dark ink
   elements (hero, sidebars) stay dark so they keep working in both themes. */
[data-theme="day"] {
	--tk-ink-line: rgba(11, 16, 32, .12);
	--tk-surface: #F4F0EA;
	--tk-surface-2: #FFFDF9;
	--tk-surface-3: rgba(11, 16, 32, .16);
	--tk-card: #FFFFFF;
	--tk-field: #FFFFFF;
	--tk-text: #0B1020;
	--tk-text-soft: #4E5669;
	--tk-text-faint: #7A818F;
	--tk-on-ink: #ECEAE6;
	--tk-on-ink-soft: #A9B0BE;
	--tk-green-soft: #E9ECEF;
	--tk-info: #2563EB;
	--tk-info-soft: #E7EEFB;
	--tk-warn: #B45309;
	--tk-warn-soft: #FDF3E1;
	--tk-danger: #C0392B;
	--tk-danger-soft: #FBEAE7;
	--tk-shadow-1: 0 1px 3px rgba(11, 16, 32, .08), 0 16px 34px -10px rgba(11, 16, 32, .18);
	--tk-shadow-2: 0 24px 60px rgba(11, 16, 32, .16);
}