/* =====================================================================
   Qlean — design tokens (single source of truth)
   Brand scale (orange): 50 #fff4ed · 100 #ffe4d4 · 200 #ffc9a8 · 300 #ffa370 · 400 #ff7a38
   · 500 #ff5722 · 600 #f4511e · 700 #e64a19 · 800 #bf360c · 900 #8f2709.
   Light: brand 700; text-bearing fills use 800 (hover 900) so white text passes AA. Dark: 500 (hover 400) with dark text.
   Nothing outside this file defines a raw color. Components only use
   var(--ql-*). The values mirror the Qlean app's theme
   (packages/ui/src/theme.css) for neutrals/status; the brand color is the orange scale above.

   Theme resolution:
     1. <html data-theme="light|dark"> — explicit choice (toggle, saved in localStorage)
     2. otherwise the OS preference via prefers-color-scheme
   ===================================================================== */

:root{
	/* ---- color: light ---- */
	--ql-primary:#e64a19;               /* brand color: icons, underlines, large text, borders */
	--ql-primary-hover:#bf360c;
	--ql-primary-fg:#ffffff;             /* text on --ql-primary-solid */
	--ql-primary-solid:#bf360c;         /* fills that carry text: white on it = 5.6:1 */
	--ql-primary-solid-hover:#8f2709;
	--ql-primary-soft:#fff4ed;          /* tinted surface behind primary icons/badges */
	--ql-focus:#bf360c;                 /* focus outline, >=3:1 on every surface */
	--ql-link:#bf360c;                  /* primary used as text */

	--ql-secondary:#f3f4f6;
	--ql-secondary-hover:#e5e7eb;
	--ql-secondary-fg:#111827;

	--ql-bg:#f9fafb;
	--ql-surface:#ffffff;
	--ql-fg:#111827;

	--ql-muted:#f3f4f6;
	--ql-muted-fg:#6b7280;
	--ql-border:#e5e7eb;

	--ql-success:#16a34a;
	--ql-success-fg:#ffffff;
	--ql-warning:#f59e0b;
	--ql-warning-fg:#111827;
	--ql-error:#dc2626;
	--ql-error-fg:#ffffff;

	/* call-to-action panel (solid brand block with inverse buttons) */
	--ql-cta-bg:#bf360c;
	--ql-cta-fg:#ffffff;
	--ql-cta-accent:#bf360c;

	--ql-ring:rgba(230,74,25,.45);
	--ql-overlay:rgba(17,24,39,.5);
	--ql-shadow-rgb:17,24,39;

	/* ---- spacing: 4px ramp ---- */
	--ql-space-1:4px;  --ql-space-2:8px;   --ql-space-3:12px;  --ql-space-4:16px;
	--ql-space-5:20px; --ql-space-6:24px;  --ql-space-8:32px;  --ql-space-10:40px;
	--ql-space-12:48px; --ql-space-16:64px; --ql-space-20:80px;
	--ql-space-section:clamp(var(--ql-space-16), 8vw, 112px);

	/* ---- radius ---- */
	--ql-radius-sm:8px;   /* tags, small controls */
	--ql-radius-md:12px;  /* buttons, inputs */
	--ql-radius-lg:16px;  /* cards */
	--ql-radius-xl:24px;  /* large media surfaces */
	--ql-radius-full:999px;

	/* ---- elevation ---- */
	--ql-shadow-1:0 1px 2px rgba(var(--ql-shadow-rgb),.06);
	--ql-shadow-2:0 8px 24px rgba(var(--ql-shadow-rgb),.08);
	--ql-shadow-3:0 16px 40px rgba(var(--ql-shadow-rgb),.12);

	/* ---- motion ---- */
	--ql-motion-fast:130ms;
	--ql-motion:190ms;
	--ql-ease:cubic-bezier(.32,.72,0,1);

	/* ---- layout ---- */
	--ql-container:1200px;
	--ql-header-h:68px;

	/* ---- type ---- */
	--ql-font-fa:'Vazirmatn', system-ui, 'Segoe UI', Tahoma, sans-serif;
	--ql-font-en:'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	color-scheme:light;
}

/* ---- color: dark (explicit) ---- */
:root[data-theme="dark"]{
	--ql-primary:#ff5722;
	--ql-primary-hover:#ff7a38;
	--ql-primary-fg:#111827;
	--ql-primary-solid:#ff5722;
	--ql-primary-solid-hover:#ff7a38;
	--ql-primary-soft:rgba(255,87,34,.16);
	--ql-focus:#ff7a38;
	--ql-link:#ff7a38;

	--ql-secondary:#1f2937;
	--ql-secondary-hover:#374151;
	--ql-secondary-fg:#f9fafb;

	--ql-bg:#111827;
	--ql-surface:#1f2937;
	--ql-fg:#f9fafb;

	--ql-muted:#1f2937;
	--ql-muted-fg:#9ca3af;
	--ql-border:#374151;

	--ql-success:#22c55e;
	--ql-success-fg:#ffffff;
	--ql-warning:#fbbf24;
	--ql-warning-fg:#111827;
	--ql-error:#ef4444;
	--ql-error-fg:#ffffff;

	--ql-cta-bg:#bf360c;
	--ql-cta-fg:#ffffff;
	--ql-cta-accent:#bf360c;

	--ql-ring:rgba(255,122,56,.55);
	--ql-overlay:rgba(0,0,0,.6);
	--ql-shadow-rgb:0,0,0;

	color-scheme:dark;
}

/* ---- color: dark (OS preference, when the visitor has not chosen) ---- */
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--ql-primary:#ff5722;
		--ql-primary-hover:#ff7a38;
		--ql-primary-fg:#111827;
		--ql-primary-solid:#ff5722;
		--ql-primary-solid-hover:#ff7a38;
		--ql-primary-soft:rgba(255,87,34,.16);
		--ql-focus:#ff7a38;
		--ql-link:#ff7a38;

		--ql-secondary:#1f2937;
		--ql-secondary-hover:#374151;
		--ql-secondary-fg:#f9fafb;

		--ql-bg:#111827;
		--ql-surface:#1f2937;
		--ql-fg:#f9fafb;

		--ql-muted:#1f2937;
		--ql-muted-fg:#9ca3af;
		--ql-border:#374151;

		--ql-success:#22c55e;
		--ql-success-fg:#ffffff;
		--ql-warning:#fbbf24;
		--ql-warning-fg:#111827;
		--ql-error:#ef4444;
		--ql-error-fg:#ffffff;

		--ql-cta-bg:#bf360c;
	--ql-cta-fg:#ffffff;
	--ql-cta-accent:#bf360c;

	--ql-ring:rgba(255,122,56,.55);
		--ql-overlay:rgba(0,0,0,.6);
		--ql-shadow-rgb:0,0,0;

		color-scheme:dark;
	}
}