/* Roobert — 400 (Regular) */
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Roobert — 500 (Medium) */
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Roobert — 600 (SemiBold) */
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Roobert — 700 (Bold) */
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ─── Design Tokens ──────────────────────────────────────────────── */

:root {
	/* ══════════════════════════════════════════════════════════════════
	   LAYER 1 — Swatches (raw color primitives)
	   Never use these directly in components. Theme tokens reference them.
	   ══════════════════════════════════════════════════════════════════ */

	/* Brand violet */
	--swatch--brand-50: #f3f0fe;
	--swatch--brand-100: #e4dffe;
	--swatch--brand-200: #c4b8fd;
	--swatch--brand-300: #9b85f7;
	--swatch--brand-500: #5b3ae8;
	--swatch--brand-600: #4a2bd4;
	--swatch--brand-700: #3a1fb5;
	--swatch--brand-800: #2b1788;
	--swatch--brand-900: #1c0f5b;
	--swatch--brand-950: #0f0a2e;

	/* Warm neutrals (H≈40°, low saturation — coconut-inspired) */
	--swatch--gray-000: #FFFFFF;
	--swatch--gray-025: #FAFAF7;
	--swatch--gray-050: #F5F3EE;
	--swatch--gray-100: #ECEAE4;
	--swatch--gray-150: #E4E1DA;
	--swatch--gray-200: #DAD7CF;
	--swatch--gray-250: #CDCAC1;
	--swatch--gray-300: #C0BCB2;
	--swatch--gray-400: #A09C93;
	--swatch--gray-450: #8B8780;
	--swatch--gray-500: #736F67;
	--swatch--gray-550: #625F58;
	--swatch--gray-600: #53504A;
	--swatch--gray-700: #403E3A;
	--swatch--gray-750: #35332F;
	--swatch--gray-800: #2A2826;
	--swatch--gray-850: #21201E;
	--swatch--gray-900: #1A1917;
	--swatch--gray-950: #131210;

	/* Semantic raw */
	--swatch--green-50: #ecfdf5;
	--swatch--green-500: #10b981;
	--swatch--green-700: #047857;
	--swatch--blue-50: #eff6ff;
	--swatch--blue-500: #3b82f6;
	--swatch--blue-700: #1d4ed8;
	--swatch--amber-50: #fffbeb;
	--swatch--amber-400: #fbbf24;
	--swatch--amber-500: #f59e0b;
	--swatch--amber-700: #b45309;
	--swatch--red-50: #fef2f2;
	--swatch--red-500: #ef4444;
	--swatch--red-700: #b91c1c;

	/* ══════════════════════════════════════════════════════════════════
	   LAYER 2 — Theme tokens (semantic references)
	   Use ONLY these in components and layouts.
	   ══════════════════════════════════════════════════════════════════ */

	/* --- Primary --- */
	--dp-primary-50: var(--swatch--brand-50);
	--dp-primary-100: var(--swatch--brand-100);
	--dp-primary-200: var(--swatch--brand-200);
	--dp-primary-300: var(--swatch--brand-300);
	--dp-primary: var(--swatch--brand-500);
	--dp-primary-600: var(--swatch--brand-600);
	--dp-primary-700: var(--swatch--brand-700);
	--dp-primary-800: var(--swatch--brand-800);
	--dp-primary-900: var(--swatch--brand-900);
	--dp-primary-950: var(--swatch--brand-950);

	--dp-primary-hover: var(--dp-primary-600);
	--dp-primary-light: var(--dp-primary-50);
	--dp-primary-subtle: var(--dp-primary-50);

	/* --- Accent (aliases to primary) --- */
	--dp-accent: var(--dp-primary);
	--dp-accent-hover: var(--dp-primary-hover);
	--dp-accent-light: var(--dp-primary-light);

	/* --- Backgrounds --- */
	--dp-bg: var(--swatch--gray-025);
	--dp-bg-alt: var(--swatch--gray-050);
	--dp-bg-deep: var(--swatch--gray-100);
	--dp-surface: var(--swatch--gray-000);

	/* --- Foreground / text --- */
	--dp-text: var(--swatch--gray-950);
	--dp-text-2: var(--swatch--gray-600);
	--dp-text-3: var(--swatch--gray-500);

	/* --- Borders --- */
	--dp-border: var(--swatch--gray-200);
	--dp-border-subtle: var(--swatch--gray-150);
	--dp-border-hover: var(--swatch--gray-300);
	--dp-placeholder: var(--swatch--gray-400);

	/* --- Semantic --- */
	--dp-success-50: var(--swatch--green-50);
	--dp-success-500: var(--swatch--green-500);
	--dp-success-700: var(--swatch--green-700);
	--dp-success: var(--dp-success-500);

	--dp-info-50: var(--swatch--blue-50);
	--dp-info-500: var(--swatch--blue-500);
	--dp-info-700: var(--swatch--blue-700);
	--dp-info: var(--dp-info-500);

	--dp-warning-50: var(--swatch--amber-50);
	--dp-warning-500: var(--swatch--amber-500);
	--dp-warning-700: var(--swatch--amber-700);
	--dp-warning: var(--dp-warning-500);
	--dp-star: var(--swatch--amber-400);

	--dp-error-50: var(--swatch--red-50);
	--dp-error-500: var(--swatch--red-500);
	--dp-error-700: var(--swatch--red-700);
	--dp-error: var(--dp-error-500);

	/* --- Per-Product Colors --- */
	--dp-color-divi-carousel-pro: #3b82f6;
	--dp-color-divi-blog-pro: #f59e0b;
	--dp-color-divi-social-plus: #ec4899;
	--dp-color-divi-instagram-feed: #e1306c;
	--dp-color-divi-google-reviews: #4285f4;
	--dp-color-divi-pro-gallery: #8b5cf6;
	--dp-color-divi-pdf-embed: #ef4444;
	--dp-color-divi-whatsapp-chat: #25d366;
	--dp-color-divi-sheets-table: #059669;

	/* --- Dark sections --- */
	--dp-dark-bg: var(--swatch--gray-950);
	--dp-dark-surface: var(--swatch--gray-900);
	--dp-dark-text: var(--swatch--gray-000);
	--dp-dark-text-2: rgba(255, 255, 255, 0.65);
	--dp-dark-text-3: rgba(255, 255, 255, 0.4);
	--dp-dark-border: rgba(255, 255, 255, 0.1);

	/* --- Typography: Font Families --- */
	--dp-font: 'Roobert', system-ui, sans-serif;
	--dp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	/* --- Typography: Scale (aligned to Claude.ai proportions) --- */
	--dp-fs-2xs: 0.625rem; /* 10px */
	--dp-fs-xs: 0.75rem; /* 12px */
	--dp-fs-sm: 0.9375rem; /* 15px — Claude body-3 */
	--dp-fs-base: 1.0625rem; /* 17px — Claude body-2 */
	--dp-fs-lg: clamp(1.1875rem, 1.5vw, 1.25rem); /* 19–20px — Claude body-1 */
	--dp-fs-xl: clamp(
		1.25rem,
		1.8vw,
		1.4375rem
	); /* 20–23px — Claude body-large-2 */
	--dp-fs-2xl: 1.5rem; /* 24px */
	--dp-fs-3xl: 2rem; /* 32px */
	--dp-fs-hero: clamp(2.75rem, 5.5vw, 4.25rem); /* 44–68px — page hero H1 */
	--dp-fs-section: clamp(1.75rem, 3.5vw, 2.5rem); /* 28–40px — section H2 */
	--dp-fs-subsection: clamp(1.375rem, 2.5vw, 1.75rem); /* 22–28px — H3 */

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

	/* --- Layout --- */
	--dp-w: 1280px;
	--dp-w-sm: 780px;
	--dp-gutter: 1.5rem;
	--dp-header-h: 64px;
	--dp-subnav-h: 0px;
	--dp-touch-min: 44px;

	/* --- Border Radius --- */
	--dp-r: 12px;
	--dp-r-sm: 8px;
	--dp-r-md: 12px;
	--dp-r-lg: 16px;
	--dp-r-xl: 20px;
	--dp-r-full: 100px;
	--dp-r-pill: 980px;

	/* --- Button --- */
	--dp-btn-h: 2.75rem; /* 44px */
	--dp-btn-h-sm: 2.25rem; /* 36px */
	--dp-btn-py: 0.625rem; /* 10px */
	--dp-btn-px: 1.25rem; /* 20px */
	--dp-btn-py-sm: 0.5rem; /* 8px */
	--dp-btn-px-sm: 0.75rem; /* 12px */
	--dp-btn-py-lg: 0.75rem; /* 12px */
	--dp-btn-px-lg: 1.75rem; /* 28px */
	--dp-btn-r: 0.5rem; /* 8px */
	--dp-btn-fs: 0.9375rem; /* 15px */

	/* --- Shadows (warm-tinted) --- */
	--dp-sh: 0 2px 8px rgba(26, 25, 24, 0.06);
	--dp-sh-lg: 0 8px 24px rgba(26, 25, 24, 0.08);
	--dp-sh-xl: 0 16px 48px rgba(26, 25, 24, 0.1);

	/* --- Motion --- */
	--dp-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dp-duration: 200ms;
	--dp-duration-slow: 350ms;

	/* --- Product color (overridden per product page) --- */
	--dp-product-color: var(--dp-primary);
}