/**
 * Homepage 3D — design tokens (Tendy Soft Trust System).
 * All tokens scoped under .homepage-3d
 * Primary Tiffany HEX values are Design Recommendations (not official brand book).
 */

.homepage-3d {
	/* Color */
	--h3d-color-primary: #0abab5;
	--h3d-color-primary-hover: #099e9a;
	--h3d-color-primary-active: #078b87;
	--h3d-color-primary-soft: #e6f8f7;
	--h3d-color-secondary: #1a6b66;
	--h3d-color-bg: #ffffff;
	--h3d-color-surface: #f7fbfa;
	--h3d-color-surface-elevated: #ffffff;
	--h3d-color-dark: #0f2f2d;
	--h3d-color-dark-alt: #16403d;
	--h3d-color-text: #0f1f1e;
	--h3d-color-text-secondary: #3d5553;
	--h3d-color-text-muted: #6b7f7d;
	--h3d-color-text-on-dark: #f5fffe;
	--h3d-color-text-muted-on-dark: #b7d4d1;
	--h3d-color-border: #d7e6e4;
	--h3d-color-border-strong: #b8cecb;
	--h3d-color-success: #0f7a4a;
	--h3d-color-error: #c0352b;
	--h3d-color-focus: #0abab5;

	/* Spacing (4/8 scale) */
	--h3d-space-1: 4px;
	--h3d-space-2: 8px;
	--h3d-space-3: 12px;
	--h3d-space-4: 16px;
	--h3d-space-5: 20px;
	--h3d-space-6: 24px;
	--h3d-space-8: 32px;
	--h3d-space-10: 40px;
	--h3d-space-12: 48px;
	--h3d-space-16: 64px;
	--h3d-space-20: 80px;
	--h3d-space-24: 96px;

	/* Layout */
	--h3d-container: 1200px;
	--h3d-container-wide: 1320px;
	--h3d-gutter: 16px;
	--h3d-section-space: 48px;
	--h3d-card-gap: 20px;
	--h3d-text-gap: 12px;

	/* Radius — Soft UI Evolution (8–16 / xl 24) */
	--h3d-radius-sm: 10px;
	--h3d-radius-md: 12px;
	--h3d-radius-lg: 16px;
	--h3d-radius-xl: 24px;

	/* Soft UI Evolution shadows (multi-layer, soft depth, WCAG-friendly) */
	--h3d-shadow-sm:
		0 1px 2px rgba(15, 47, 45, 0.04),
		0 2px 8px rgba(15, 47, 45, 0.04);
	--h3d-shadow-md:
		0 2px 4px rgba(15, 47, 45, 0.04),
		0 8px 24px rgba(15, 47, 45, 0.07);
	--h3d-shadow-lg:
		0 4px 8px rgba(15, 47, 45, 0.04),
		0 16px 40px rgba(15, 47, 45, 0.09);
	--h3d-shadow-soft-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	--h3d-shadow-focus: 0 0 0 3px rgba(10, 186, 181, 0.35);

	/* Type — Yekan Bakh (unchanged) */
	--h3d-font: "Yekan Bakh FaNum", "Yekan Bakh", Tahoma, Arial, sans-serif;
	--h3d-lh-tight: 1.25;
	--h3d-lh-snug: 1.35;
	--h3d-lh-body: 1.75;

	/* Motion — Soft UI 200–300ms */
	--h3d-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--h3d-duration-fast: 200ms;
	--h3d-duration: 260ms;
	--h3d-duration-reveal: 420ms;

	/* Z */
	--h3d-z-header: 50;
	--h3d-z-sticky: 40;
	--h3d-z-sticky-apply: 48;
	--h3d-z-dropdown: 55;
	--h3d-z-overlay: 60;
	--h3d-z-scene-rail: 45;

	/* ----- v2 Editorial tokens ----- */

	/* Typography scale */
	--h3d-type-display-xl: clamp(3rem, 8vw, 6.5rem);
	--h3d-type-display: clamp(2.25rem, 5.5vw, 4.25rem);
	--h3d-type-section: clamp(0.95rem, 3.15vw, 1.85rem);
	--h3d-type-editorial: clamp(1.35rem, 2.8vw, 2rem);
	--h3d-type-index: clamp(2.5rem, 6vw, 5rem);
	--h3d-type-stat: clamp(3rem, 9vw, 7rem);

	/* 12-column editorial grid */
	--h3d-grid-cols: 12;
	--h3d-grid-cols-mobile: 4;
	--h3d-grid-gap: 16px;

	/* Scene rhythm */
	--h3d-scene-space: clamp(4rem, 10vw, 7rem);
	--h3d-scene-space-tight: clamp(2.5rem, 6vw, 4rem);

	/* Surface roles */
	--h3d-surface-stage: #ffffff;
	--h3d-surface-canvas: #fafcfc;
	--h3d-surface-accent: var(--h3d-color-primary-soft);

	/* Scene rail */
	--h3d-rail-width: 3px;
	--h3d-rail-offset: 12px;
	--h3d-rail-badge-width: clamp(68px, 6.2vw, 100px);
	--h3d-rail-badge-top: 64px;
	--h3d-rail-badge-end: 20px;
	--h3d-rail-progress: 0;
}

@media (min-width: 768px) {
	.homepage-3d {
		--h3d-gutter: 24px;
		--h3d-section-space: 64px;
		--h3d-card-gap: 24px;
		--h3d-text-gap: 16px;
	}
}

@media (min-width: 1024px) {
	.homepage-3d {
		--h3d-gutter: 32px;
		--h3d-section-space: 80px;
		--h3d-grid-gap: 24px;
		--h3d-rail-badge-top: 76px;
		--h3d-rail-badge-end: 24px;
	}
}

.homepage-3d--v2 {
	--h3d-section-space: var(--h3d-scene-space);
}