/*
 * KomKits design tokens.
 *
 * Palette and type follow the client's reference storefront: Marcellus for
 * display, DM Sans for everything operational, a warm cream ground and a deep
 * brown that carries both the footer and the headings.
 */

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

	/* --- ink --- */
	--kk-brown:        #41362D;
	--kk-brown-deep:   #2E251E;
	--kk-text:         #3A322B;
	--kk-muted:        #6E645A;
	--kk-faint:        #9A9086;

	/* --- accent --- */
	--kk-gold:         #B98F31;
	--kk-gold-deep:    #96721F;
	--kk-gold-soft:    #EFE3C8;

	/* --- 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(65, 54, 45, .05), 0 12px 32px -18px rgba(65, 54, 45, .28);

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

/*
 * 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.
 */
:root {
	--theme-palette-color-1: #B98F31;  /* accent            */
	--theme-palette-color-2: #96721F;  /* accent, hover     */
	--theme-palette-color-3: #41362D;  /* headings          */
	--theme-palette-color-4: #3A322B;  /* 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: #96721F;
	--theme-link-hover-color: #41362D;
	--theme-text-color: #3A322B;
	--theme-headings-color: #41362D;
	--theme-content-spacing: 1.4em;
	--theme-button-background-initial-color: #41362D;
	--theme-button-background-hover-color: #2E251E;
	--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: #B98F31;
	--theme-font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--theme-headings-font-family: "Marcellus", Georgia, serif;
}