/* Kolab brand layer — loaded after styles.css. Aligns the help center with getkolab.ai:
   Ubuntu type, the purple hero gradient, a floating white nav card, and Kolab's teal / coral / amber / purple. */
:root {
	--k-purple: #9251e6;
	--k-purple-deep: #5a2daa;
	--k-teal: #01abbb;
	--k-coral: #e06a6a;
	--k-amber: #feb651;
	--k-ink: #1f2937;
	--k-muted: #5b677f;
	--k-hero: radial-gradient(60% 50% at 15% 20%, rgba(180, 140, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%),
		radial-gradient(50% 60% at 80% 40%, rgba(179, 245, 200, 0.1) 0%, rgba(0, 0, 0, 0) 65%),
		radial-gradient(70% 45% at 60% 85%, rgba(160, 120, 240, 0.16) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(145deg, #5a2daa 0%, #9251e6 40%, #7b3fd4 70%, #6230b0 100%);
	--hdr: 80px;

	/* remap the ported Mantine tokens onto Kolab's palette */
	--kolab-teal: var(--k-teal);
	--kolab-coral: var(--k-coral);
	--kolab-amber: var(--k-amber);
	--teal-0: #e5f7f8; --teal-6: #01abbb; --teal-7: #0193a1; --teal-8: #017c88;
	--coral-0: #fdf0f0; --coral-5: #e06a6a; --coral-7: #c94f4f;
	--text: var(--k-ink);
	--dimmed: var(--k-muted);
	--gray-0: #f6f5fb; --gray-1: #efedf7; --gray-2: #e7e4f1; --gray-3: #dcd8ea;
	--font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { background: #faf9fd; }
::selection { background: rgba(146, 81, 230, 0.22); }
html { scroll-padding-top: 96px; }
main { position: relative; isolation: isolate; }

/* ---------- floating nav card ---------- */
.site-header { position: sticky; top: 0; height: var(--hdr); margin-bottom: calc(-1 * var(--hdr)); background: transparent; border: 0; padding: 12px 12px 0; }
.header-inner { background: #fff; border-radius: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); height: 56px; padding: 0 12px 0 16px; width: 100%; }
.nav-desktop { gap: 1.5rem; font-weight: 500; color: var(--k-ink); }
.nav-desktop a:hover, [data-nav].active { color: var(--k-purple); }
[data-nav].active { font-weight: 700; }
.search-trigger { border-radius: 8px; background: var(--gray-0); border-color: var(--gray-2); }
.search-trigger:hover { border-color: var(--k-purple); color: var(--k-ink); }
.nav-drawer { inset: var(--hdr) 12px auto 12px; border-radius: 16px; box-shadow: 0 20px 40px rgba(31, 41, 55, 0.18); max-height: calc(100vh - var(--hdr) - 12px); overflow-y: auto; }
.nav-drawer a:not(.dimmed) { font-weight: 500; }

/* ---------- shared purple band ---------- */
.home-hero, .article-hero, .section-page > div:first-child { color: #fff; }
.home-hero .lede, .article-hero .lede, .section-page > div:first-child .lede { color: rgba(255, 255, 255, 0.86); }
.article-hero .badge, .section-page > div:first-child .badge { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* home */
.home-hero { position: relative; padding-top: calc(var(--hdr) + 5rem); padding-bottom: 8rem; }
.home-hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--k-hero); }
.home-hero h1 { font-size: 3.5rem; letter-spacing: -0.03em; }
.home-hero .lede { max-width: 620px; }
.home-hero + .container { position: relative; margin-top: -4.5rem; }
.home-hero + .container .card-xl { border: 0; box-shadow: 0 12px 30px -8px rgba(58, 28, 110, 0.22); }
.home-popular { padding-top: 3.5rem; }
@media (max-width: 575px) { .home-hero h1 { font-size: 2.4rem; } .home-hero { padding-bottom: 6.5rem; } }

/* article */
.article-hero { background: var(--k-hero); padding: calc(var(--hdr) + 2.5rem) 0 2.75rem; margin-bottom: 2.5rem; }
.article-hero .breadcrumbs { color: rgba(255, 255, 255, 0.7); }
.article-hero .breadcrumbs [aria-current] { color: #fff; }

/* section index */
.section-page { padding-top: calc(var(--hdr) + 2.5rem); }
.section-page > div:first-child { position: relative; padding-bottom: 2.75rem; }
.section-page > div:first-child::before { content: ""; position: absolute; z-index: -1; top: calc(-1 * (var(--hdr) + 2.5rem)); bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--k-hero); }
.section-page > div:first-child .month-jump, .section-page > div:first-child .dimmed { color: rgba(255, 255, 255, 0.75); }

/* ---------- type ---------- */
.page-title { font-weight: 700; letter-spacing: -0.025em; }
.mdx-content h2 { color: var(--k-ink); letter-spacing: -0.015em; }
.mdx-content h2::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--k-purple); flex-shrink: 0; }
.mdx-content h3 { color: var(--k-ink); }
.mdx-content a { color: var(--teal-7); text-decoration: underline; text-decoration-color: rgba(1, 171, 187, 0.35); text-underline-offset: 3px; }
.mdx-content a:hover { text-decoration-color: currentColor; }
.mdx-content code { background: #efeaf9; color: #4b2390; }
.mdx-content pre { background: #1e1438; }
.mdx-content blockquote { border-left-color: var(--k-purple); }
.mdx-content thead { background: var(--gray-1); }

/* ---------- cards + colour tints ---------- */
.card { border-color: var(--gray-2); }
a.card:hover { box-shadow: 0 10px 24px -8px rgba(58, 28, 110, 0.2); border-color: rgba(146, 81, 230, 0.35); }
.tint-teal, .badge-teal { background: rgba(1, 171, 187, 0.1); color: var(--teal-7); }
.tint-coral, .badge-coral { background: rgba(224, 106, 106, 0.12); color: var(--k-coral); }
.tint-grape, .badge-grape, .tint-violet { background: rgba(146, 81, 230, 0.1); color: var(--k-purple); }
.tint-amber { background: rgba(254, 182, 81, 0.18); color: #b97411; }
.badge-outline { border-color: rgba(1, 171, 187, 0.5); color: var(--teal-7); }

/* ---------- CTAs + buttons ---------- */
.cta { border-radius: 16px; }
.cta-teal { background: linear-gradient(135deg, #01abbb 0%, #0193a1 100%); }
.cta-coral { background: linear-gradient(135deg, #feb651 0%, #e06a6a 100%); }
.cta-grape { background: linear-gradient(135deg, #9251e6 0%, #5a2daa 100%); }
.cta-teal .cta-btn { color: var(--teal-8); }
.cta-coral .cta-btn { color: #c94f4f; }
.cta-grape .cta-btn { color: var(--k-purple-deep); }
.cta-btn { font-weight: 500; }
.btn { background: var(--k-teal); border-radius: 8px; font-weight: 500; }
.btn:hover { background: var(--teal-7); }
.cl-highlight { border-left-color: var(--k-purple); }

/* ---------- footer (matches getkolab.ai) ---------- */
.site-footer { background: #212529; color: #fff; border-top: 0; margin-top: 4rem; padding: 60px 0; text-align: left; font-size: 1rem; }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__h { color: #fff; font-weight: 600; margin-bottom: 0.875rem; }
.site-footer__col a { color: #adb5bd; padding: 0.25rem 0; font-size: 0.9375rem; transition: color 0.15s; }
.site-footer__col a:hover { color: #fff; text-decoration: none; }
.site-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 2rem; padding-top: 2rem; }
.site-footer__bar p { color: #adb5bd; font-size: 0.9375rem; margin: 0; }
.site-footer__social { color: #adb5bd; display: inline-flex; }
.site-footer__social:hover { color: #fff; }
@media (max-width: 767px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 24px; } }
@media (max-width: 479px) { .site-footer__cols { grid-template-columns: 1fr; } }

:focus-visible { outline-color: var(--k-purple); }