/* CodeSync docs — brand theme (cyan -> purple on near-black) */

:root {
	--cs-cyan: #00d2ff;
	--cs-purple: #b184f5;
	--cs-bg: #030305;
	--cs-surface: #09090b;
}

/* Accent + link colors share the brand cyan */
[data-md-color-accent="cyan"] {
	--md-accent-fg-color: var(--cs-cyan);
}

/* ---- Dark (slate) scheme ---- */
[data-md-color-scheme="slate"] {
	--md-default-bg-color: var(--cs-bg);
	--md-primary-fg-color: #06060a;
	--md-primary-bg-color: #f4f4f5;
	--md-accent-fg-color: var(--cs-cyan);
	--md-typeset-a-color: var(--cs-cyan);
	--md-code-bg-color: #0d0d12;
	--md-footer-bg-color: #06060a;
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
	background-color: #06060a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Subtle gradient underline on the active tab */
.md-tabs__link--active {
	color: var(--cs-cyan);
}

/* Gradient brand text helper */
.cs-gradient {
	background: linear-gradient(90deg, var(--cs-cyan) 0%, var(--cs-purple) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Hero block on the home page */
.cs-hero {
	padding: 2.4rem 0 1.2rem;
}

.cs-hero h1 {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.6rem;
}

.cs-hero p.cs-tagline {
	font-size: 1.05rem;
	color: #a1a1aa;
	max-width: 42rem;
	margin: 0 0 1.4rem;
}

/* Call-to-action buttons */
.cs-cta .md-button {
	margin: 0.2rem 0.4rem 0.2rem 0;
}

.cs-cta .md-button--primary {
	background: linear-gradient(90deg, var(--cs-cyan) 0%, var(--cs-purple) 100%);
	border: none;
	color: #06060a;
	font-weight: 700;
}

.cs-cta .md-button--primary:hover {
	filter: brightness(1.08);
}

/* Feature cards grid */
.cs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 1.4rem 0;
}

.cs-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.7rem;
	padding: 1.1rem 1.2rem;
	background: rgba(255, 255, 255, 0.015);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.cs-card:hover {
	border-color: rgba(0, 210, 255, 0.4);
	transform: translateY(-2px);
}

.cs-card h3 {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
}

.cs-card p {
	margin: 0;
	font-size: 0.82rem;
	color: #a1a1aa;
}

/* Tighten code blocks a touch */
.md-typeset pre > code {
	border-radius: 0.5rem;
}