/*!
 * @be-partner-labs/ds v1.8.0 — core/index
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/core/index.min.css">
 * npm:  @import "@be-partner-labs/ds/core/index";
 * Docs: https://ds.bepartnerlabs.com/components/index/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

/*
 * Be Partner DS — definition-first, agent-ready design system
 * Agent instructions: https://ds.bepartnerlabs.com/AGENTS.md
 * Implementation skill: https://ds.bepartnerlabs.com/skills/bpl-ds-implement/SKILL.md
 * Verification skill:   https://ds.bepartnerlabs.com/skills/bpl-ds-verify/SKILL.md
 * Full documentation:   https://ds.bepartnerlabs.com
 */

/* ── @property — enables smooth animated transitions ─────── */
@property --bp-primary {
	syntax: '<color>';
	initial-value: #5fcb9f;
	inherits: true;
}
@property --bp-color-bg {
	syntax: '<color>';
	initial-value: #f8f6f2;
	inherits: true;
}
@property --bp-color-bg-subtle {
	syntax: '<color>';
	initial-value: #f2efe9;
	inherits: true;
}
@property --bp-color-bg-elevated {
	syntax: '<color>';
	initial-value: #ffffff;
	inherits: true;
}
@property --bp-color-text {
	syntax: '<color>';
	initial-value: #181715;
	inherits: true;
}
@property --bp-color-text-muted {
	syntax: '<color>';
	initial-value: #6b6760;
	inherits: true;
}
@property --bp-color-text-inverse {
	syntax: '<color>';
	initial-value: #f2eee6;
	inherits: true;
}
@property --bp-color-border {
	syntax: '<color>';
	initial-value: #e5e0d8;
	inherits: true;
}

@layer bp-tokens {
	:root {
		/* ═══════════════════════════════════════════════════════
       CLIENT SURFACE — set these, everything else adapts
       ═══════════════════════════════════════════════════════ */
		--bp-primary: #5fcb9f; /* mint green — BPL brand */
		--bp-radius: 0.625rem; /* base radius — all components scale from this */

		/* ── Primary scale — color-mix baseline, upgraded via @supports ── */
		--bp-primary-hover: color-mix(in srgb, var(--bp-primary) 82%, black);
		--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, white);
		--bp-primary-fg: color-mix(in srgb, var(--bp-primary) 30%, black);
	}

	@supports (color: oklch(from red l c h)) {
		:root {
			--bp-primary-hover: oklch(from var(--bp-primary) calc(l - 0.08) c h);
			--bp-primary-subtle: oklch(from var(--bp-primary) calc(l + 0.28) c h);
			--bp-primary-fg: oklch(from var(--bp-primary) 0.2 c h);
		}
	}

	:root {
		/* ── Radius scale ────────────────────────────────────── */
		--bp-radius-sm: calc(var(--bp-radius) * 0.5);
		--bp-radius-md: var(--bp-radius);
		--bp-radius-lg: calc(var(--bp-radius) * 1.5);
		--bp-radius-xl: calc(var(--bp-radius) * 2);
		--bp-radius-full: 9999px;

		/* ── Surface tokens (light mode) ─────────────────────── */
		--bp-color-bg: #f8f6f2;
		--bp-color-bg-subtle: #f2efe9;
		--bp-color-bg-elevated: #ffffff;
		--bp-color-text: #181715;
		--bp-color-text-muted: #6b6760;
		--bp-color-text-inverse: #f2eee6;
		--bp-color-border: #e5e0d8;

		/* ── Feedback ─────────────────────────────────────────── */
		--bp-color-success: #2e9e72;
		--bp-color-warning: #c97a3d;
		--bp-color-error: #b14a3a;
		--bp-color-error-surface: #b14a3a;
		--bp-color-info: #3b82f6;

		/* ── Focus ring ───────────────────────────────────────── */
		--bp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bp-primary) 40%, transparent);

		/* ── Typography ───────────────────────────────────────── */
		--bp-font-sans: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
		--bp-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

		--bp-font-weight-regular: 400;
		--bp-font-weight-medium: 500;
		--bp-font-weight-semibold: 600;
		--bp-font-weight-bold: 700;

		--bp-leading-tight: 1.25;
		--bp-leading-normal: 1.5;
		--bp-leading-loose: 1.75;

		/* Fluid type scale (360px → 1200px viewport) */
		--bp-text-xs: clamp(0.694rem, 0.65rem + 0.22vw, 0.8rem);
		--bp-text-sm: clamp(0.833rem, 0.78rem + 0.27vw, 0.95rem);
		--bp-text-base: clamp(1rem, 0.93rem + 0.33vw, 1.125rem);
		--bp-text-lg: clamp(1.2rem, 1.11rem + 0.44vw, 1.35rem);
		--bp-text-xl: clamp(1.44rem, 1.31rem + 0.63vw, 1.8rem);
		--bp-text-2xl: clamp(1.728rem, 1.54rem + 0.94vw, 2.4rem);
		--bp-text-3xl: clamp(2.074rem, 1.82rem + 1.27vw, 3.2rem);
		--bp-text-4xl: clamp(2.488rem, 2.13rem + 1.79vw, 4.2rem);
		--bp-text-5xl: clamp(2.986rem, 2.5rem + 2.43vw, 5.6rem);

		/* ── Spacing (base 4px) ───────────────────────────────── */
		--bp-space-1: 0.25rem;
		--bp-space-2: 0.5rem;
		--bp-space-3: 0.75rem;
		--bp-space-4: 1rem;
		--bp-space-5: 1.25rem;
		--bp-space-6: 1.5rem;
		--bp-space-8: 2rem;
		--bp-space-10: 2.5rem;
		--bp-space-12: 3rem;
		--bp-space-16: 4rem;
		--bp-space-20: 5rem;
		--bp-space-24: 6rem;

		/* ── Shadows ──────────────────────────────────────────── */
		--bp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--bp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--bp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		--bp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

		/* ── Motion ───────────────────────────────────────────── */
		--bp-duration-fast: 120ms;
		--bp-duration-normal: 220ms;
		--bp-duration-slow: 380ms;
		--bp-ease: cubic-bezier(0.4, 0, 0.2, 1);
		--bp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

		/* Smooth theme switching */
		transition:
			--bp-color-bg var(--bp-duration-normal) var(--bp-ease),
			--bp-color-bg-subtle var(--bp-duration-normal) var(--bp-ease),
			--bp-color-bg-elevated var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text-muted var(--bp-duration-normal) var(--bp-ease),
			--bp-color-text-inverse var(--bp-duration-normal) var(--bp-ease),
			--bp-color-border var(--bp-duration-normal) var(--bp-ease);
	}

	/* ── Dark mode ────────────────────────────────────────────── */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme='light']) {
			--bp-primary: #6fd9ae;
			--bp-color-bg: #16140f;
			--bp-color-bg-subtle: #1e1c17;
			--bp-color-bg-elevated: #242118;
			--bp-color-text: #f2eee6;
			--bp-color-text-muted: #9e9a93;
			--bp-color-text-inverse: #181715;
			--bp-color-border: #2d3b30;
			--bp-color-success: #4dc896;
			--bp-color-warning: #e2a06a;
			--bp-color-error: #e07f6e;
			--bp-color-error-surface: #a84434;
			--bp-color-info: #60a5fa;
			--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, #16140f);
		}
	}

	@supports (color: oklch(from red l c h)) {
		@media (prefers-color-scheme: dark) {
			:root:not([data-theme='light']) {
				--bp-primary-subtle: oklch(from var(--bp-primary) calc(l - 0.3) c h);
				--bp-primary-fg: oklch(from var(--bp-primary) 0.15 c h);
			}
		}
		[data-theme='dark'] {
			--bp-primary-subtle: oklch(from var(--bp-primary) calc(l - 0.3) c h);
			--bp-primary-fg: oklch(from var(--bp-primary) 0.15 c h);
		}
	}

	[data-theme='dark'] {
		--bp-primary: #6fd9ae;
		--bp-color-bg: #16140f;
		--bp-color-bg-subtle: #1e1c17;
		--bp-color-bg-elevated: #242118;
		--bp-color-text: #f2eee6;
		--bp-color-text-muted: #9e9a93;
		--bp-color-text-inverse: #181715;
		--bp-color-border: #2d3b30;
		--bp-color-success: #4dc896;
		--bp-color-warning: #e2a06a;
		--bp-color-error: #e07f6e;
		--bp-color-info: #60a5fa;
		--bp-primary-subtle: color-mix(in srgb, var(--bp-primary) 18%, #16140f);
	}

	[data-theme='light'] {
		--bp-primary: #5fcb9f;
		--bp-color-bg: #f8f6f2;
		--bp-color-bg-subtle: #f2efe9;
		--bp-color-bg-elevated: #ffffff;
		--bp-color-text: #181715;
		--bp-color-text-muted: #6b6760;
		--bp-color-text-inverse: #f2eee6;
		--bp-color-border: #e5e0d8;
		--bp-color-success: #2e9e72;
		--bp-color-warning: #c97a3d;
		--bp-color-error: #b14a3a;
		--bp-color-info: #3b82f6;
	}
}

@layer bp-reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		font-family: var(--bp-font-sans);
		font-size: 100%;
		line-height: var(--bp-leading-normal);
		color: var(--bp-color-text);
		background-color: var(--bp-color-bg);
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		hanging-punctuation: first last;
	}

	body {
		min-height: 100dvh;
	}

	img,
	video,
	svg {
		display: block;
		max-width: 100%;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: var(--bp-leading-tight);
		font-weight: var(--bp-font-weight-bold);
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
	}

	a {
		color: var(--bp-color-brand);
		text-decoration-skip-ink: auto;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

@layer bp-grid {
	/**
	 * .bp-content-grid
	 * Named-line grid with five zones: full-width, breakout, popout, content (default).
	 * Public API:
	 *   --padding-inline        Horizontal gutter. Default: clamp(1.25rem, 1vw + 1rem, 2rem)
	 *   --content-max-width     Max width of the content zone. Default: 72rem (1152px)
	 *   --popout-max-width      Max width of the popout zone.  Default: 60rem (960px)
	 *   --breakout-max-width    Max width of the breakout zone. Default: 90rem (1440px)
	 *
	 * Child classes:
	 *   (none)       → content zone (default)
	 *   .popout      → popout zone (~960px) — quotes, CTAs, mid-size media
	 *   .breakout    → breakout zone (~1440px) — grids, covers, video
	 *   .full-width  → full viewport width, inherits grid columns for sub-content
	 */
	.bp-content-grid {
		--_padding-inline: var(--padding-inline, clamp(1.25rem, 1vw + 1rem, 2rem));
		--_content-max-width: var(--content-max-width, 72rem);
		--_popout-max-width: var(--popout-max-width, 60rem);
		--_breakout-max-width: var(--breakout-max-width, 90rem);
		--_popout-size: calc((var(--_popout-max-width) - var(--_content-max-width)) / 2);
		--_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);

		display: grid;
		grid-template-columns:
			[full-width-start]
			minmax(var(--_padding-inline), 1fr)
			[breakout-start]
			minmax(0, var(--_breakout-size))
			[popout-start]
			minmax(0, var(--_popout-size))
			[content-start]
			min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
			[content-end]
			minmax(0, var(--_popout-size))
			[popout-end]
			minmax(0, var(--_breakout-size))
			[breakout-end]
			minmax(var(--_padding-inline), 1fr)
			[full-width-end];
	}

	/* Default: all direct children land in the content zone */
	.bp-content-grid > :not(.popout, .breakout, .full-width),
	.full-width > :not(.popout, .breakout, .full-width) {
		grid-column: content;
	}

	.bp-content-grid > .popout,
	.full-width > .popout {
		grid-column: popout;
	}

	.bp-content-grid > .breakout,
	.full-width > .breakout {
		grid-column: breakout;
	}

	/* Full-width inherits the parent grid columns so its own children can use zones */
	.bp-content-grid > .full-width {
		grid-column: full-width;
		display: grid;
		grid-template-columns: inherit;
	}

	/**
	 * .bp-container
	 * Declares an inline-size container so child components can use @container queries.
	 * Drop this on any wrapper to opt child components into container-aware layouts.
	 */
	.bp-container {
		container-type: inline-size;
	}
}

@layer bp-utilities {
	.bp-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}