/**
 * KB design tokens
 *
 * Scoped to .kb-design so Elementor / Astra pages are not restyled.
 *
 * Initial palette from AGENTS.md, cross-checked against live brand assets
 * (2026-10-19): bhavsar.ai_ logo golds cluster ~#B48400–#CC9C00 with ivory
 * near #F0F0E4; #DCA600 is retained as the brighter action gold. KB icon is
 * dark charcoal on transparent — navy surfaces remain appropriate.
 */

.kb-design {
	/* Color — dark theme defaults */
	--kb-color-navy: #0c1628;
	--kb-color-surface-dark: #142238;
	--kb-color-gold: #dca600;
	--kb-color-gold-hover: #f0bc20;
	--kb-color-ivory: #f5f5f0;
	--kb-color-muted: #b8c0cc;
	--kb-color-surface-light: #f8f8f5;
	--kb-color-text-dark: #15191f;
	--kb-color-charcoal: #252525;
	--kb-color-border-dark: rgba(245, 245, 240, 0.12);
	--kb-color-border-light: rgba(21, 25, 31, 0.12);
	--kb-color-focus: #f0bc20;
	--kb-color-overlay: rgba(12, 22, 40, 0.72);

	/* Semantic aliases (dark context) */
	--kb-bg: var(--kb-color-navy);
	--kb-bg-elevated: var(--kb-color-surface-dark);
	--kb-text: var(--kb-color-ivory);
	--kb-text-muted: var(--kb-color-muted);
	--kb-border: var(--kb-color-border-dark);
	--kb-accent: var(--kb-color-gold);
	--kb-accent-hover: var(--kb-color-gold-hover);
	--kb-on-accent: var(--kb-color-navy);

	/* Typography */
	--kb-font-sans: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--kb-font-display: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--kb-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

	--kb-fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--kb-fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--kb-fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--kb-fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--kb-fs-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--kb-fs-xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
	--kb-fs-2xl: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
	--kb-fs-3xl: clamp(2.75rem, 2.1rem + 2.4vw, 3.75rem);

	--kb-lh-tight: 1.15;
	--kb-lh-snug: 1.3;
	--kb-lh-body: 1.65;
	--kb-fw-regular: 400;
	--kb-fw-medium: 500;
	--kb-fw-semibold: 600;
	--kb-fw-bold: 700;
	--kb-tracking-tight: -0.02em;
	--kb-tracking-wide: 0.06em;

	/* Spacing scale */
	--kb-space-2xs: 0.25rem;
	--kb-space-xs: 0.5rem;
	--kb-space-sm: 0.75rem;
	--kb-space-md: 1rem;
	--kb-space-lg: 1.5rem;
	--kb-space-xl: 2rem;
	--kb-space-2xl: 3rem;
	--kb-space-3xl: 4.5rem;
	--kb-space-4xl: 6rem;

	/* Layout */
	--kb-container-max: 72rem; /* 1152px */
	--kb-container-narrow: 44rem;
	--kb-container-pad: clamp(1.25rem, 4vw, 2rem);
	--kb-section-pad-y: clamp(3rem, 6vw, 5rem);
	--kb-content-gap: clamp(1.5rem, 3vw, 2.5rem);

	/* Radii / borders / shadows */
	--kb-radius-sm: 0.25rem;
	--kb-radius-md: 0.5rem;
	--kb-radius-lg: 0.75rem;
	--kb-border-width: 1px;
	--kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
	--kb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
	--kb-shadow-focus: 0 0 0 3px rgba(240, 188, 32, 0.45);

	/* Motion */
	--kb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--kb-duration: 180ms;

	/* Component sizing */
	--kb-btn-height: 2.75rem;
	--kb-btn-pad-x: 1.25rem;
	--kb-icon-sm: 1rem;
	--kb-media-ratio: 16 / 9;
}

/* Optional light band inside the design system */
.kb-design .kb-theme-light {
	--kb-bg: var(--kb-color-surface-light);
	--kb-bg-elevated: #ffffff;
	--kb-text: var(--kb-color-text-dark);
	--kb-text-muted: #5c6570;
	--kb-border: var(--kb-color-border-light);
	--kb-on-accent: var(--kb-color-navy);
	--kb-shadow-sm: 0 1px 2px rgba(21, 25, 31, 0.06);
	--kb-shadow-md: 0 10px 28px rgba(21, 25, 31, 0.08);
}