/*
 * BuyerDesk design tokens.
 *
 * Single source for colour, type, spacing, radius, shadow, layout widths and
 * motion. Everything else references these custom properties. Token names in
 * the --bd-* namespace are shared with BuyerDesk Core's block stylesheet, so
 * Core blocks automatically pick up the theme's look.
 *
 * Contrast (WCAG 2.2 AA, normal text >= 4.5:1), computed:
 *   ink / white 10.35 · muted / white 5.93 · muted / surface-alt 5.55 · muted / tint 5.32
 *   navy-900 / white 16.90 · blue-600 / white 5.44 (links; white on blue buttons 5.44)
 *   blue-600 / blue-50 4.96 · white / green-700 5.02 (Tested) · gold-ink / gold-400 8.06
 *   white / purple-700 7.10 · white / orange-700 5.18 · white / slate-600 7.58
 *   amber-700 / amber-50 4.84 · blue-700 / blue-50 7.00 · footer #c8d3e6 / navy-800 10.26
 *   Breadcrumb separators use border-strong and are aria-hidden (decorative).
 */

:root {
	/* ---- Colour: brand ---- */
	--bd-navy-900: #0b1b3f;
	--bd-navy-800: #0f253f;
	--bd-navy-700: #1b3358;
	--bd-blue-700: #0848c4;
	--bd-blue-600: #0a5cf5;
	--bd-blue-500: #2f74f7;
	--bd-blue-100: #dce9fe;
	--bd-blue-50: #eef5ff;

	/* ---- Colour: neutrals ---- */
	--bd-ink: #334155;
	--bd-muted: #55657d;
	--bd-border: #e2e8f0;
	--bd-border-strong: #cbd5e1;
	--bd-surface: #ffffff;
	--bd-surface-alt: #f4f8fc;
	--bd-tint: #eaf4fe;
	--bd-band: #eff6fd;
	--bd-warm: #fffaf0;
	--bd-warm-border: #f6e7c1;

	/* ---- Colour: semantic / badge tokens (match Core colour tokens) ---- */
	--bd-green-700: #15803d;
	--bd-green-50: #ecfdf3;
	--bd-gold-500: #f5b400;
	--bd-gold-400: #f6c343;
	--bd-gold-ink: #3d2e00;
	--bd-purple-700: #6d28d9;
	--bd-orange-700: #c2410c;
	--bd-slate-600: #475569;
	--bd-red-700: #b91c1c;
	--bd-amber-700: #b45309;
	--bd-amber-50: #fffbeb;

	/* ---- Aliases consumed by BuyerDesk Core block CSS ---- */
	--bd-green: var(--bd-green-700);
	--bd-red: var(--bd-red-700);
	--bd-amber: var(--bd-amber-700);
	--bd-link: var(--bd-blue-600);
	--bd-highlight: var(--bd-blue-50);

	/* ---- Typography ---- */
	--bd-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--bd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--bd-fs-xs: 0.8125rem;   /* 13 */
	--bd-fs-sm: 0.875rem;    /* 14 */
	--bd-fs-base: 1rem;      /* 16 */
	--bd-fs-md: 1.0625rem;   /* 17 card titles */
	--bd-fs-lg: 1.25rem;     /* 20 h3 */
	--bd-fs-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);    /* 24→30 section titles */
	--bd-fs-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem); /* 30→40 page h1 */
	--bd-fs-display: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); /* 34→52 hero */
	--bd-lh-tight: 1.2;
	--bd-lh-snug: 1.35;
	--bd-lh-body: 1.6;
	--bd-fw-regular: 400;
	--bd-fw-medium: 500;
	--bd-fw-semibold: 600;
	--bd-fw-bold: 700;
	--bd-tracking-tight: -0.02em;

	/* ---- Spacing (4px base) ---- */
	--bd-space-1: 0.25rem;
	--bd-space-2: 0.5rem;
	--bd-space-3: 0.75rem;
	--bd-space-4: 1rem;
	--bd-space-5: 1.25rem;
	--bd-space-6: 1.5rem;
	--bd-space-8: 2rem;
	--bd-space-10: 2.5rem;
	--bd-space-12: 3rem;
	--bd-space-16: 4rem;
	--bd-section-gap: clamp(2rem, 1.5rem + 2vw, 3rem);  /* between page sections */
	--bd-block-gap: 1.5rem;                              /* Core blocks */

	/* ---- Layout ---- */
	--bd-container: 1200px;
	--bd-container-narrow: 760px;   /* reading measure */
	--bd-gutter: 1rem;              /* mobile */
	--bd-sidebar: 320px;
	--bd-layout-gap: 2rem;
	--bd-header-h: 64px;

	/* ---- Shape & depth ---- */
	--bd-radius-sm: 8px;
	--bd-radius: 12px;
	--bd-radius-lg: 16px;
	--bd-radius-pill: 999px;
	--bd-shadow-sm: 0 1px 2px rgba(15, 37, 63, 0.06);
	--bd-shadow: 0 2px 10px rgba(15, 37, 63, 0.06);
	--bd-shadow-lg: 0 12px 32px rgba(15, 37, 63, 0.14);

	/* ---- Focus & motion ---- */
	--bd-focus: 0 0 0 3px #fff, 0 0 0 5px var(--bd-blue-600);
	--bd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--bd-dur: 180ms;
	--bd-z-header: 50;
	--bd-z-mega: 60;
	--bd-z-dialog: 100;
}

/* Breakpoints (reference; CSS custom properties cannot be used in media queries):
 *   sm 480px · md 768px · lg 1024px (desktop header, sidebars) · xl 1280px */
@media (min-width: 768px) {
	:root {
		--bd-gutter: 1.5rem;
		--bd-header-h: 72px;
	}
}
@media (min-width: 1024px) {
	:root {
		--bd-layout-gap: 2.5rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root {
		--bd-dur: 0ms;
	}
}