/**
 * BellePet Design System V1.0 tokens.
 * Components must consume these variables instead of declaring raw brand values.
 */
:root {
	/* Brand and semantic color. */
	--bp-color-primary: #0b1f33;
	--bp-color-primary-hover: #102a44;
	--bp-color-secondary: #355169;
	--bp-color-accent: #16a34a;
	--bp-color-accent-hover: #12813c;
	--bp-color-accent-active: #0f6a33;
	--bp-color-background: #f6f8fa;
	--bp-color-surface: #ffffff;
	--bp-color-surface-subtle: #eef3f6;
	--bp-color-border: #d7e0e7;
	--bp-color-border-strong: #aebdc8;
	--bp-color-text: #172536;
	--bp-color-text-muted: #5d6d7c;
	--bp-color-text-inverse: #ffffff;
	--bp-color-link: #126b36;
	--bp-color-link-hover: #0c5128;
	--bp-color-success: #16763a;
	--bp-color-warning: #9a5700;
	--bp-color-error: #b42318;
	--bp-color-info: #176b9c;

	/* Backward-compatible aliases introduced in Sprint 1. */
	--bp-color-ink: var(--bp-color-primary);
	--bp-color-brand: var(--bp-color-accent);
	--bp-color-brand-dark: var(--bp-color-accent-hover);
	--bp-color-muted: var(--bp-color-surface-subtle);
	--bp-color-text-primary: var(--bp-color-text);
	--bp-color-text-secondary: var(--bp-color-text-muted);

	/* Typography. */
	--bp-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--bp-font-family-heading: var(--bp-font-family-sans);
	--bp-font-weight-regular: 400;
	--bp-font-weight-medium: 500;
	--bp-font-weight-semibold: 600;
	--bp-font-weight-bold: 700;
	--bp-font-size-caption: 0.75rem;
	--bp-font-size-small: 0.875rem;
	--bp-font-size-body: 1rem;
	--bp-font-size-body-large: 1.125rem;
	--bp-font-size-h4: clamp(1.125rem, 1.5vw, 1.375rem);
	--bp-font-size-h3: clamp(1.375rem, 2vw, 1.75rem);
	--bp-font-size-h2: clamp(1.875rem, 3vw, 3rem);
	--bp-font-size-h1: clamp(2.5rem, 5vw, 4.75rem);
	--bp-line-height-tight: 1.12;
	--bp-line-height-heading: 1.2;
	--bp-line-height-body: 1.65;
	--bp-line-height-small: 1.5;
	--bp-letter-spacing-eyebrow: 0.11em;

	/* Spacing: four-pixel base with fluid section rhythm. */
	--bp-space-0: 0;
	--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;
	--bp-space-section: clamp(4rem, 7vw, 7rem);
	--bp-space-section-compact: clamp(2.75rem, 5vw, 4.5rem);

	/* Layout. */
	--bp-container-narrow: 47.5rem;
	--bp-container: 77.5rem;
	--bp-container-wide: 90rem;
	--bp-gutter: clamp(1rem, 3vw, 2rem);
	--bp-grid-gap: clamp(1rem, 2.4vw, 2rem);

	/* Shape, elevation and motion. */
	--bp-radius-sm: 0.375rem;
	--bp-radius-md: 0.75rem;
	--bp-radius-lg: 1rem;
	--bp-radius-pill: 999px;
	--bp-shadow-sm: 0 0.25rem 0.75rem rgb(11 31 51 / 8%);
	--bp-shadow-card: 0 0.75rem 2rem rgb(11 31 51 / 10%);
	--bp-shadow-elevated: 0 1.25rem 3rem rgb(11 31 51 / 15%);
	--bp-focus-ring: 0 0 0 0.1875rem rgb(22 163 74 / 38%);
	--bp-focus: var(--bp-focus-ring);
	--bp-transition-fast: 160ms ease;
	--bp-transition-standard: 240ms ease;

	/* Layers and touch. */
	--bp-target-min: 2.75rem;
	--bp-z-header: 100;
	--bp-z-sticky: 200;
	--bp-z-overlay: 1000;
	--bp-z-modal: 1100;
}