/*
 * Design tokens for Careflow.
 * Rationale for every value lives in /DESIGN.md — this file only defines them.
 *
 * No @import of external fonts / assets here on purpose: this is legal
 * software handling client data under German data-protection law, so nothing
 * in the UI may cause the browser to call out to a third-party CDN
 * (the well-known "Google Fonts CDN = GDPR violation" ruling applies here).
 * Everything below resolves to fonts/colors that ship with the page itself.
 */

:root {
	color-scheme: light;

	/* ---- Surfaces ---- */
	--bg: #fafaf8;
	--bg-subtle: #f5f5f1;
	--surface: #ffffff;
	--surface-hover: #f1f2ef;
	--overlay-scrim: rgba(15, 18, 25, 0.45);
	/* Tinted with the page's own background (not a dark scrim) for overlays
	   that lean on backdrop-filter blur for separation ("frosted glass" —
	   same recipe as the topbar's own sticky blur) instead of dimming —
	   currently just the command palette scrim. */
	--overlay-scrim-subtle: color-mix(in srgb, var(--bg) 90%, transparent);

	/* ---- Borders ---- */
	--border: #e4e6ea;
	--border-strong: #d3d7de;

	/* ---- Text ---- */
	--text: #1b1f26;
	--text-secondary: #4b5563;
	--text-muted: #6b7280;
	--text-subtle: #9ca3af;
	--text-on-primary: #ffffff;

	/* ---- Brand / primary ----
	   Crail (the same rust/terracotta as --tag-crail below) is the app's de
	   facto standard accent — every list page (Klienten, Kontakte, Vorgänge)
	   already overrides the generic indigo default to Crail for its primary
	   action/accent. Defined here directly (not indigo) so that stops being
	   a per-page override and just is the default everywhere: base.css's
	   generic button/link/focus-ring styling, and every component reading
	   --primary/--ring without its own accent override. */
	--primary: #9e5b40;
	--primary-hover: #7d4630;
	--primary-active: #5c341f;
	--primary-subtle: #f6ece6;
	--primary-border: #e2c4b3;
	--ring: #9e5b40;

	/* Brand mark / focus / command-palette glow / progress indicators —
	   never for body text. Warm rust→amber gradient, same family as
	   --primary/--tag-crail above (was an indigo→violet→sky gradient). */
	--accent-gradient: linear-gradient(135deg, #9e5b40 0%, #c17a52 55%, #e0a06a 100%);

	/* Sidebar's own accent (named colour "Crail") — deliberately distinct
	   from --primary so the nav rail reads as its own surface. */
	--sidebar-accent: #9e5b40;
	--sidebar-accent-bg: #f6ece6;

	/* ---- Status ---- */
	--success: #059669;
	--success-bg: #ecfdf5;
	--success-border: #a7f3d0;
	--warning: #d97706;
	--warning-bg: #fffbeb;
	--warning-border: #fde68a;
	--danger: #dc2626;
	--danger-bg: #fef2f2;
	--danger-border: #fecaca;
	--info: #2563eb;
	--info-bg: #eff6ff;
	--info-border: #bfdbfe;

	/* ---- Tag palette (Notion-style multi-select tags, 7 hues for the 7
	   Aufgabenkreise) ---- */
	--tag-blue: #2563eb;
	--tag-blue-bg: #eff6ff;
	--tag-blue-border: #bfdbfe;
	--tag-green: #059669;
	--tag-green-bg: #ecfdf5;
	--tag-purple: #7c3aed;
	--tag-purple-bg: #f5f3ff;
	--tag-purple-hover: #6d28d9;
	--tag-purple-border: #ddd6fe;
	--tag-orange: #d97706;
	--tag-orange-bg: #fffbeb;
	--tag-pink: #db2777;
	--tag-pink-bg: #fdf2f8;
	--tag-teal: #0d9488;
	--tag-teal-bg: #f0fdfa;
	--tag-gray: #6b7280;
	--tag-gray-bg: #f3f4f6;
	--tag-crail: #9e5b40;
	--tag-crail-bg: #f6ece6;
	--tag-crail-hover: #7d4630;
	--tag-crail-border: #e2c4b3;

	/* ---- Typography ----
	   System font stack only (see rationale above) — but tuned to prefer the
	   grotesk-style system faces (Segoe UI / San Francisco / Roboto) that read
	   closest to Inter, which is what Linear/Notion/Slack all use. */
	--font-sans:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Helvetica, Arial,
		sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.875rem;
	--text-md: 0.9375rem;
	--text-lg: 1rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;

	/* ---- Spacing (4px grid) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--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 ---- */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 999px;

	/* ---- Shadow ---- */
	--shadow-sm:
		0 1px 2px rgba(16, 24, 40, 0.04);
	--shadow-md:
		0 2px 8px rgba(16, 24, 40, 0.06),
		0 1px 2px rgba(16, 24, 40, 0.04);
	--shadow-lg:
		0 12px 32px rgba(16, 24, 40, 0.12),
		0 2px 6px rgba(16, 24, 40, 0.05);
	/* Für frei schwebende, rechts verankerte Elemente (Pin-Dock-Karten) —
	   Licht fällt gedanklich von oben rechts ein, der Schatten fällt deshalb
	   nach unten UND links statt gerade nach unten wie --shadow-lg, und
	   bleibt kompakter (kleinerer Blur/Streuung). */
	--shadow-flyout:
		-7px 9px 14px -5px rgba(16, 24, 40, 0.15),
		-2px 3px 5px rgba(16, 24, 40, 0.06);
	--shadow-focus: 0 0 0 3px var(--primary-subtle);

	/* ---- Motion ---- */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 120ms;
	--dur-base: 180ms;
	--dur-slow: 280ms;
	--dur-slower: 420ms;

	/* ---- Layout ---- */
	--sidebar-w: 15rem;
	--sidebar-w-collapsed: 4rem;
	--topbar-h: 3.5rem;
}

/* Dark theme: explicit opt-in (data-theme="dark") or system preference when
   the user hasn't chosen ("system", the default). This is the palette that
   draws directly from antigravity.google's deep-space / floating-gradient
   language — see DESIGN.md §2. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;

		--bg: #151411;
		--bg-subtle: #1a1815;
		--surface: #1f1d19;
		--surface-hover: #27241f;
		--overlay-scrim: rgba(9, 8, 7, 0.6);
		--overlay-scrim-subtle: color-mix(in srgb, var(--bg) 90%, transparent);

		--border: #36322c;
		--border-strong: #474239;

		--text: #eae8e4;
		--text-secondary: #c7c2bb;
		--text-muted: #a19a91;
		--text-subtle: #6f6a63;

		--primary: #c98a6c;
		--primary-hover: #d9a488;
		--primary-active: #e6bda3;
		--primary-subtle: rgba(201, 138, 108, 0.16);
		--primary-border: rgba(201, 138, 108, 0.35);
		--ring: #c98a6c;

		--accent-gradient: linear-gradient(135deg, #c98a6c 0%, #d9a488 55%, #e8c2a0 100%);

		--sidebar-accent: #c98a6c;
		--sidebar-accent-bg: rgba(201, 138, 108, 0.16);

		--success: #34d399;
		--success-bg: rgba(52, 211, 153, 0.12);
		--success-border: rgba(52, 211, 153, 0.3);
		--warning: #fbbf24;
		--warning-bg: rgba(251, 191, 36, 0.12);
		--warning-border: rgba(251, 191, 36, 0.3);
		--danger: #f87171;
		--danger-bg: rgba(248, 113, 113, 0.12);
		--danger-border: rgba(248, 113, 113, 0.3);
		--info: #60a5fa;
		--info-bg: rgba(96, 165, 250, 0.12);
		--info-border: rgba(96, 165, 250, 0.3);

		--tag-blue: #60a5fa;
		--tag-blue-bg: rgba(96, 165, 250, 0.14);
		--tag-blue-border: rgba(96, 165, 250, 0.35);
		--tag-green: #34d399;
		--tag-green-bg: rgba(52, 211, 153, 0.14);
		--tag-purple: #a78bfa;
		--tag-purple-bg: rgba(167, 139, 250, 0.14);
		--tag-purple-hover: #c4b5fd;
		--tag-purple-border: rgba(167, 139, 250, 0.35);
		--tag-orange: #fbbf24;
		--tag-orange-bg: rgba(251, 191, 36, 0.14);
		--tag-pink: #f472b6;
		--tag-pink-bg: rgba(244, 114, 182, 0.14);
		--tag-teal: #2dd4bf;
		--tag-teal-bg: rgba(45, 212, 191, 0.14);
		--tag-gray: #9ca3af;
		--tag-gray-bg: rgba(156, 163, 175, 0.14);
		--tag-crail: #c98a6c;
		--tag-crail-bg: rgba(201, 138, 108, 0.16);
		--tag-crail-hover: #d9a488;
		--tag-crail-border: rgba(201, 138, 108, 0.35);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md:
			0 2px 8px rgba(0, 0, 0, 0.35),
			0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-lg:
			0 16px 40px rgba(0, 0, 0, 0.45),
			0 2px 6px rgba(0, 0, 0, 0.3);
		--shadow-flyout:
			-7px 9px 14px -5px rgba(0, 0, 0, 0.45),
			-2px 3px 5px rgba(0, 0, 0, 0.25);
		--shadow-focus: 0 0 0 3px var(--primary-subtle);
	}
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--bg: #151411;
	--bg-subtle: #1a1815;
	--surface: #1f1d19;
	--surface-hover: #27241f;
	--overlay-scrim: rgba(9, 8, 7, 0.6);
	--overlay-scrim-subtle: color-mix(in srgb, var(--bg) 90%, transparent);
	--border: #36322c;
	--border-strong: #474239;
	--text: #eae8e4;
	--text-secondary: #c7c2bb;
	--text-muted: #a19a91;
	--text-subtle: #6f6a63;
	--primary: #c98a6c;
	--primary-hover: #d9a488;
	--primary-active: #e6bda3;
	--primary-subtle: rgba(201, 138, 108, 0.16);
	--primary-border: rgba(201, 138, 108, 0.35);
	--ring: #c98a6c;
	--accent-gradient: linear-gradient(135deg, #c98a6c 0%, #d9a488 55%, #e8c2a0 100%);
	--sidebar-accent: #c98a6c;
	--sidebar-accent-bg: rgba(201, 138, 108, 0.16);
	--success: #34d399;
	--success-bg: rgba(52, 211, 153, 0.12);
	--success-border: rgba(52, 211, 153, 0.3);
	--warning: #fbbf24;
	--warning-bg: rgba(251, 191, 36, 0.12);
	--warning-border: rgba(251, 191, 36, 0.3);
	--danger: #f87171;
	--danger-bg: rgba(248, 113, 113, 0.12);
	--danger-border: rgba(248, 113, 113, 0.3);
	--info: #60a5fa;
	--info-bg: rgba(96, 165, 250, 0.12);
	--info-border: rgba(96, 165, 250, 0.3);
	--tag-blue: #60a5fa;
	--tag-blue-bg: rgba(96, 165, 250, 0.14);
	--tag-blue-border: rgba(96, 165, 250, 0.35);
	--tag-green: #34d399;
	--tag-green-bg: rgba(52, 211, 153, 0.14);
	--tag-purple: #a78bfa;
	--tag-purple-bg: rgba(167, 139, 250, 0.14);
	--tag-purple-hover: #c4b5fd;
	--tag-purple-border: rgba(167, 139, 250, 0.35);
	--tag-orange: #fbbf24;
	--tag-orange-bg: rgba(251, 191, 36, 0.14);
	--tag-pink: #f472b6;
	--tag-pink-bg: rgba(244, 114, 182, 0.14);
	--tag-teal: #2dd4bf;
	--tag-teal-bg: rgba(45, 212, 191, 0.14);
	--tag-gray: #9ca3af;
	--tag-gray-bg: rgba(156, 163, 175, 0.14);
	--tag-crail: #c98a6c;
	--tag-crail-bg: rgba(201, 138, 108, 0.16);
	--tag-crail-hover: #d9a488;
	--tag-crail-border: rgba(201, 138, 108, 0.35);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md:
		0 2px 8px rgba(0, 0, 0, 0.35),
		0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-lg:
		0 16px 40px rgba(0, 0, 0, 0.45),
		0 2px 6px rgba(0, 0, 0, 0.3);
	--shadow-flyout:
		-7px 9px 14px -5px rgba(0, 0, 0, 0.45),
		-2px 3px 5px rgba(0, 0, 0, 0.25);
	--shadow-focus: 0 0 0 3px var(--primary-subtle);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-slower: 0ms;
	}
}