/**
 * Kashmir Nuts & Berries — Next-Level Luxury Design Tokens
 * 🎨 Palette: Beige · Brown · Purple · Chocolate Brown
 *
 * Hierarchy: Palette → RGB Channels → Typography → Spacing → Layout → Motion → Elevation → Gradients
 */

:root {
	/* ─── Palette: Beige, Brown, Purple, Chocolate Brown ─── */

	/* 1. BEIGE & CREAM SURFACES (Soft, Organic, Linen) */
	--knb-cream:            #f7f3eb;   /* Softest organic linen cream */
	--knb-off-white:        #fcfaf6;   /* Pristine light surface */
	--knb-stone:            #e8decb;   /* Muted linen stone */
	--knb-beige:            #ebdcc9;   /* Organic warm beige highlight */
	--knb-beige-dark:       #d4c1a8;   /* Deep sand accent */
	--knb-ivory:            #faf6f0;   /* Velvet ivory backdrop */

	/* 2. RICH WARM BROWN (Walnut, Roasted Chestnut, Warm Earth) */
	--knb-brown:            #6e4937;   /* Rich Walnut Brown */
	--knb-brown-light:      #8c5d47;   /* Roasted Chestnut */
	--knb-brown-warm:       #5c3a29;   /* Warm Terracotta Earth */
	--knb-brown-mid:        #7d533e;   /* Medium Toast Brown */

	/* 3. ROYAL KASHMIR PURPLE (Saffron Flower Plum, Mulberry, Violet Glow) */
	--knb-purple-dark:      #2e1329;   /* Abyssal Royal Plum */
	--knb-purple:           #4c1c46;   /* Primary Royal Kashmir Purple */
	--knb-purple-mid:       #682c60;   /* Vibrant Mulberry */
	--knb-purple-light:     #8c3e82;   /* Saffron Flower Lilac */
	--knb-purple-vivid:     #9b3b8e;   /* Electric Mulberry Accent */

	/* 4. DEEP CHOCOLATE BROWN (Rich Espresso Dark Mode, Deep Contrast, Midnight) */
	--knb-chocolate-brown:  #2b1b17;   /* Deep Chocolate Brown */
	--knb-chocolate-dark:   #231512;   /* Abyssal Dark Chocolate */
	--knb-chocolate-abyss:  #1a0d0b;   /* Midnight Dark Chocolate */
	--knb-chocolate-light:  #3b241e;   /* Milk Chocolate Shadow */
	--knb-dark-brown:       #241612;   /* Legacy Espresso Dark Brown */
	--knb-dark-brown-abyss: #180e0c;   /* Legacy Midnight */

	/* 5. LUXURY GOLD ACCENTS */
	--knb-gold:             #d8b168;   /* Kashmir Saffron Gold */
	--knb-sunrise:          #ebd28e;   /* Warm Sunset Glow */
	--knb-mist:             rgba(247, 243, 235, 0.75); /* Frosted glass tint */

	/* Backwards compatibility aliases */
	--knb-walnut:           var(--knb-brown);
	--knb-walnut-dark:      var(--knb-chocolate-brown);
	--knb-forest:           var(--knb-purple);
	--knb-forest-light:     var(--knb-purple-mid);

	/* ─── RGB Channels for Dynamic Compositing ─── */
	--knb-purple-rgb:       76, 28, 70;
	--knb-chocolate-rgb:    43, 27, 23;
	--knb-brown-rgb:        110, 73, 55;
	--knb-beige-rgb:        235, 220, 201;
	--knb-cream-rgb:        247, 243, 235;
	--knb-gold-rgb:         216, 177, 104;
	--knb-dark-brown-rgb:   36, 22, 18;

	/* ─── Typography ─── */
	--knb-font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--knb-font-sans:  "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--knb-text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--knb-text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--knb-text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
	--knb-text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--knb-text-xl:   clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--knb-text-2xl:  clamp(2rem, 1.5rem + 2vw, 3rem);
	--knb-text-3xl:  clamp(2.75rem, 2rem + 3vw, 4.5rem);
	--knb-text-hero: clamp(3.25rem, 2.5rem + 4vw, 6.5rem);

	/* Font weights */
	--knb-weight-light:    300;
	--knb-weight-regular:  400;
	--knb-weight-medium:   500;
	--knb-weight-semibold: 600;

	/* ─── Spacing ─── */
	--knb-space-2xs:  0.25rem;
	--knb-space-xs:   0.5rem;
	--knb-space-sm:   1rem;
	--knb-space-md:   1.5rem;
	--knb-space-lg:   2.5rem;
	--knb-space-xl:   4rem;
	--knb-space-2xl:  6rem;
	--knb-space-3xl:  clamp(5rem, 8vw, 10rem);
	--knb-section-pad: clamp(4rem, 10vh, 8rem);

	/* ─── Layout ─── */
	--knb-container:      min(1280px, calc(100% - 2 * var(--knb-space-lg)));
	--knb-container-wide: min(1440px, calc(100% - 2 * var(--knb-space-md)));
	--knb-radius:         1.75rem;   /* 28px — all cards, section boxes, containers */
	--knb-radius-sm:      1rem;      /* 16px — inputs, chips, tags, small cards */
	--knb-radius-lg:      2.25rem;   /* 36px — hero, showcase, showcase cards */
	--knb-radius-pill:    999px;     /* full pill — all buttons, search bars, badges */

	/* ─── Motion ─── */
	--knb-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--knb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--knb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--knb-duration-fast: 0.3s;
	--knb-duration:      0.6s;
	--knb-duration-slow: 1.2s;

	/* ─── Elevation & Glassmorphism ─── */
	--knb-shadow-sm:        0 4px 24px rgba(43, 27, 23, 0.08);
	--knb-shadow-md:        0 12px 48px rgba(43, 27, 23, 0.14);
	--knb-shadow-lg:        0 24px 80px rgba(43, 27, 23, 0.22);
	--knb-shadow-purple:    0 12px 40px rgba(76, 28, 70, 0.32);
	--knb-shadow-chocolate: 0 16px 56px rgba(35, 21, 18, 0.45);
	--knb-shadow-glow:      0 0 48px rgba(216, 177, 104, 0.28);
	--knb-glass:            rgba(247, 243, 235, 0.68);
	--knb-glass-heavy:      rgba(247, 243, 235, 0.94);
	--knb-glass-purple:     rgba(76, 28, 70, 0.88);
	--knb-glass-chocolate:  rgba(35, 21, 18, 0.85);

	/* ─── Multi-Color Luxury Gradients ─── */
	--knb-grad-purple:            linear-gradient(135deg, var(--knb-purple-mid), var(--knb-purple-dark));
	--knb-grad-brown:             linear-gradient(135deg, var(--knb-brown-light), var(--knb-brown));
	--knb-grad-chocolate:         linear-gradient(135deg, var(--knb-chocolate-light), var(--knb-chocolate-dark));
	--knb-grad-luxury:            linear-gradient(135deg, var(--knb-purple) 0%, var(--knb-chocolate-dark) 100%);
	--knb-grad-chocolate-purple:  linear-gradient(135deg, var(--knb-chocolate-brown) 0%, var(--knb-purple-dark) 55%, var(--knb-purple) 100%);
	--knb-grad-purple-chocolate:  linear-gradient(135deg, var(--knb-purple-mid) 0%, var(--knb-chocolate-brown) 100%);
	--knb-grad-beige-linen:       linear-gradient(180deg, var(--knb-cream) 0%, var(--knb-beige) 100%);
	--knb-grad-sunrise:           linear-gradient(160deg, var(--knb-sunrise), var(--knb-gold));
	--knb-grad-mist:              linear-gradient(180deg, var(--knb-cream), rgba(235, 220, 201, 0.45));
	--knb-grad-walnut:            linear-gradient(135deg, var(--knb-chocolate-dark), var(--knb-chocolate-abyss));

	--knb-grad-hero-overlay:
		linear-gradient(to bottom, rgba(35, 21, 18, 0.65) 0%, rgba(76, 28, 70, 0.45) 50%, rgba(26, 13, 11, 0.92) 100%),
		radial-gradient(ellipse at 30% 20%, rgba(216, 177, 104, 0.22), transparent 60%),
		radial-gradient(circle at 80% 70%, rgba(140, 62, 130, 0.25), transparent 50%);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--knb-duration-fast: 0.01ms;
		--knb-duration:      0.01ms;
		--knb-duration-slow: 0.01ms;
	}
}