/*
 * Navarang design tokens.
 *
 * Palette derived from the Navarang logo: a deep chocolate brown ground,
 * antique gold emblem, and white wordmark. Marcellus for display, DM Sans
 * for everything operational.
 */

:root {
	/* --- ground and surface --- */
	--kk-shell:        #FEFBF8;
	--kk-cream:        #F9F4EE;
	--kk-white:        #FFFFFF;
	--kk-bar:          #1E1610;

	/* --- ink --- */
	--kk-brown:        #2A1F14;
	--kk-brown-deep:   #1E1610;
	--kk-text:         #352A20;
	--kk-muted:        #6E645A;
	--kk-faint:        #9A9086;

	/* --- accent --- */
	--kk-gold:         #C9952E;
	--kk-gold-light:   #E8C468;
	--kk-gold-deep:    #8A6518;
	--kk-gold-soft:    #F0E4C6;

	/* --- lines --- */
	--kk-rule:         #E7DCCD;
	--kk-rule-soft:    #F0E9DE;

	/* --- semantic --- */
	--kk-sale:         #9C3320;
	--kk-ok:           #2F6B45;
	--kk-star:         #E0A419;

	/* --- type --- */
	--kk-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--kk-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--kk-step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
	--kk-step-0:  clamp(0.92rem, 0.89rem + 0.14vw, 1.00rem);
	--kk-step-1:  clamp(1.05rem, 1.00rem + 0.26vw, 1.20rem);
	--kk-step-2:  clamp(1.25rem, 1.15rem + 0.48vw, 1.55rem);
	--kk-step-3:  clamp(1.55rem, 1.36rem + 0.92vw, 2.15rem);
	--kk-step-4:  clamp(1.95rem, 1.60rem + 1.70vw, 3.00rem);

	/* --- rhythm --- */
	--kk-gap-xs: 0.5rem;
	--kk-gap-s:  0.875rem;
	--kk-gap-m:  1.5rem;
	--kk-gap-l:  2.5rem;
	--kk-gap-xl: 4rem;
	--kk-section: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);

	--kk-wide: 1360px;
	--kk-page: 1180px;

	--kk-radius: 2px;
	--kk-shadow: 0 1px 2px rgba(42, 31, 20, .06), 0 12px 32px -18px rgba(42, 31, 20, .30);

	--kk-ease: cubic-bezier(.22, .61, .36, 1);

	/*
	 * The emblem is not flat gold — it is a metal ramp, dark at the edges and
	 * bright across the middle. Rules and edges that quote it read as part of the
	 * mark; a flat gold line next to it just looks like a different gold.
	 */
	--kk-gild: linear-gradient(90deg, rgba(201,149,46,0) 0%, var(--kk-gold-deep) 18%,
		var(--kk-gold-light) 50%, var(--kk-gold-deep) 82%, rgba(201,149,46,0) 100%);
}

/*
 * Blocksy drives its buttons, links, prices and tab states from its own palette
 * variables. Remapping those once is far more reliable than overriding each
 * component selector, and it keeps anything we have not styled yet on-brand.
 *
 * html:root rather than :root, because Blocksy prints its own :root palette in
 * an inline <style> that lands *after* this file in the head. Same specificity
 * would lose on source order, so this selector carries one extra step -- which
 * is what keeps the stock blue out of buttons, tabs and focus rings.
 */
html:root {
	--theme-palette-color-1: #C9952E;  /* accent            */
	--theme-palette-color-2: #8A6518;  /* accent, hover     */
	--theme-palette-color-3: #2A1F14;  /* headings          */
	--theme-palette-color-4: #352A20;  /* body text         */
	--theme-palette-color-5: #E7DCCD;  /* borders           */
	--theme-palette-color-6: #F9F4EE;  /* cream ground      */
	--theme-palette-color-7: #FEFBF8;  /* warm white        */
	--theme-palette-color-8: #FFFFFF;  /* white             */

	--theme-link-initial-color: #8A6518;
	--theme-link-hover-color: #2A1F14;
	--theme-text-color: #352A20;
	--theme-headings-color: #2A1F14;
	--theme-content-spacing: 1.4em;
	--theme-button-background-initial-color: #2A1F14;
	--theme-button-background-hover-color: #1E1610;
	--theme-button-text-initial-color: #FEFBF8;
	--theme-button-text-hover-color: #FFFFFF;
	--theme-form-field-border-initial-color: #E7DCCD;
	--theme-form-field-border-focus-color: #C9952E;
	--theme-font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--theme-headings-font-family: "Marcellus", Georgia, serif;
}