/**
 * Darcc India design system
 *
 * Fonts are enqueued globally (see design-system.php). In Elementor HTML
 * widgets you do not need a Google Fonts link. Use:
 *
 *   font-family: var(--ds-font-headline);  -- Libre Caslon Text
 *   font-family: var(--ds-font-body);      -- Work Sans
 *   font-family: var(--ds-font-label);     -- Work Sans
 *
 * Or classes: .ds-headline  .ds-body  .ds-label
 * Buttons:    .ds-btn .ds-btn--primary | --secondary | --inverted | --outlined
 */

:root {
	/* Brand bases */
	--ds-primary: #507a95;
	--ds-secondary: #ebf1f4;
	--ds-tertiary: #f9f9f9;
	--ds-neutral: #2d3436;
	--ds-white: #ffffff;
	--ds-danger: #c0392b;

	/* Primary scale (1 = darkest, 10 = lightest; 5 = brand) */
	--ds-primary-1: #243743;
	--ds-primary-2: #304959;
	--ds-primary-3: #3c5c70;
	--ds-primary-4: #466b83;
	--ds-primary-5: #507a95;
	--ds-primary-6: #7092a8;
	--ds-primary-7: #92adbd;
	--ds-primary-8: #b5c7d2;
	--ds-primary-9: #d8e2e8;
	--ds-primary-10: #eef2f4;

	/* Neutral scale */
	--ds-neutral-1: #141718;
	--ds-neutral-2: #1b1f20;
	--ds-neutral-3: #222728;
	--ds-neutral-4: #282e30;
	--ds-neutral-5: #2d3436;
	--ds-neutral-6: #53595a;
	--ds-neutral-7: #7d8182;
	--ds-neutral-8: #a7aaab;
	--ds-neutral-9: #d1d2d3;
	--ds-neutral-10: #eaebeb;

	--ds-font-headline: "Libre Caslon Text", "Palatino Linotype", Palatino, Georgia, serif;
	--ds-font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
	--ds-font-label: var(--ds-font-body);

	--ds-radius: 10px;
	--ds-radius-sm: 8px;
	--ds-radius-pill: 999px;
	--ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ds-page: #ebede8;
}

/* Typography helpers for Custom HTML */
.ds-headline {
	font-family: var(--ds-font-headline);
	font-size-adjust: from-font;
	color: var(--ds-neutral);
	font-weight: 400;
	line-height: 1.25;
}

.ds-body {
	font-family: var(--ds-font-body);
	font-size-adjust: from-font;
	color: var(--ds-neutral);
	font-weight: 400;
	line-height: 1.6;
}

.ds-label {
	font-family: var(--ds-font-label);
	font-size-adjust: from-font;
	color: var(--ds-neutral);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/* Buttons */
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.7em 1.25em;
	border: 1px solid transparent;
	border-radius: var(--ds-radius-sm);
	font-family: var(--ds-font-label);
	font-size: 0.9375rem;
	font-weight: 500;
	font-size-adjust: from-font;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ds-ease), color 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease), opacity 0.2s var(--ds-ease);
}

.ds-btn:hover {
	opacity: 0.92;
	text-decoration: none;
}

.ds-btn:focus-visible {
	outline: 2px solid var(--ds-primary);
	outline-offset: 2px;
}

.ds-btn--primary {
	background: var(--ds-primary);
	color: var(--ds-white);
}

.ds-btn--primary:hover {
	color: var(--ds-white);
}

.ds-btn--secondary {
	background: var(--ds-secondary);
	color: var(--ds-neutral);
}

.ds-btn--secondary:hover {
	color: var(--ds-neutral);
}

.ds-btn--inverted {
	background: var(--ds-neutral);
	color: var(--ds-white);
}

.ds-btn--inverted:hover {
	color: var(--ds-white);
}

.ds-btn--outlined {
	background: var(--ds-white);
	border-color: var(--ds-neutral);
	color: var(--ds-neutral);
}

.ds-btn--outlined:hover {
	color: var(--ds-neutral);
}

.ds-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-sm);
	background: var(--ds-neutral);
	color: var(--ds-white);
	cursor: pointer;
}

.ds-icon-btn--primary {
	background: var(--ds-primary);
}

.ds-icon-btn--danger {
	background: var(--ds-danger);
}

/* Search field */
.ds-search {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	max-width: 28rem;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: var(--ds-radius);
	background: var(--ds-secondary);
	color: var(--ds-neutral-6);
	font-family: var(--ds-font-body);
	font-size: 0.9375rem;
}

.ds-search input {
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ds-neutral);
	font-family: inherit;
	font-size: inherit;
	outline: none;
}

.ds-search input::placeholder {
	color: var(--ds-neutral-7);
}

/* Status bar */
.ds-bar {
	display: block;
	height: 6px;
	border-radius: var(--ds-radius-pill);
	background: var(--ds-primary);
}

.ds-bar--neutral {
	background: var(--ds-neutral);
}