/*
 * LV Timber design tokens (both sites).
 * Values from notes/design-main.md 2.x and notes/design-shop.md 1.x.
 * Site variants: body.lvt-site-main / body.lvt-site-shop.
 * Breakpoints (media queries cannot use variables): desktop >= 1025px,
 * tablet 768-1024px, mobile <= 767px, small grid step 576px.
 */

/* Figtree v9 variable font (weights 300-900), self-hosted. */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand */
	--lvt-c-primary: #814D3B;
	--lvt-c-primary-2: #A1604A;
	--lvt-c-primary-dark: #543227;
	--lvt-c-primary-tint: #F8ECE7;
	--lvt-c-focus-border: #DABAAF;
	--lvt-gradient: linear-gradient(54.5deg, #814D3B 25.62%, #A1604A 71.21%);

	/* Text */
	--lvt-c-secondary: #352F2D;
	--lvt-c-text: #635854;
	--lvt-c-heading: #222222;
	--lvt-c-link: #333333;
	--lvt-c-dark: #242424;
	--lvt-c-muted: #777777;
	--lvt-c-sub: #848484;
	--lvt-c-grey-ui: #BBBBBB;
	--lvt-c-grey-btn: #7A7A7A;
	--lvt-c-placeholder: #878787;
	--lvt-c-required: #E01020;
	--lvt-c-invalid: #CA1919;

	/* States */
	--lvt-c-success: #27A323;
	--lvt-c-warning: #D0AE82;

	/* Surfaces */
	--lvt-c-bg: #F7F7F7;
	--lvt-c-white: #FFFFFF;
	--lvt-c-bg-footer: #F0F0F0;
	--lvt-c-bg-box: #EDEDED;
	--lvt-c-bg-warm: #F4EFEC;
	--lvt-c-bg-hover: #F1F1F1;
	--lvt-c-disabled-bg: #EBEBEB;

	/* Lines */
	--lvt-c-line: #E8E8E8;
	--lvt-c-line-2: #EBEBEB;
	--lvt-c-line-footer: #E0E0E0;
	--lvt-c-line-soft: rgba(0, 0, 0, .105);
	--lvt-c-form-border: rgba(12, 12, 12, .1);

	/* Shadows */
	--lvt-shadow-header: 0 3px 5px rgba(140, 140, 140, .1);
	--lvt-shadow-dropdown: 0 0 3px rgba(0, 0, 0, .15);
	--lvt-shadow-float: 0 0 5px rgba(0, 0, 0, .17);
	--lvt-shadow-card: 0 0 4px rgba(0, 0, 0, .12);
	--lvt-shadow-card-hover: 0 0 9px rgba(0, 0, 0, .2);

	/* Shape */
	--lvt-radius: 5px;

	/* Fonts (errata #6, decisions #8) */
	--lvt-font-figtree: Figtree, sans-serif;
	--lvt-font-arial: Arial, Helvetica, sans-serif;
	--lvt-font-body: var(--lvt-font-figtree);
	--lvt-font-heading: var(--lvt-font-figtree);
	--lvt-font-nav: var(--lvt-font-arial);
	--lvt-font-accent: var(--lvt-font-figtree);

	/* Type scale */
	--lvt-fs-body: 16px;
	--lvt-lh-body: 24px;

	/* Layout */
	--lvt-container: 1222px;
	--lvt-gutter: 15px;
	--lvt-main-gap: 40px;
	--lvt-section-gap: 96px;
	--lvt-topbar-h: 41px;
	--lvt-bar-h: 96px;

	/* Motion */
	--lvt-ease: cubic-bezier(.19, 1, .22, 1);
	--lvt-ease-nav: cubic-bezier(.175, .885, .32, 1.15);

	/* Header specifics that differ per site */
	--lvt-nav-hover-color: rgba(51, 51, 51, .7);
	--lvt-logo-gap: 20px;
	--lvt-logo-mobile-w: 80px;

	/* Layers */
	--lvt-z-dropdown: 380;
	--lvt-z-header: 390;
	--lvt-z-search: 385;
	--lvt-z-float: 350;
	--lvt-z-overlay: 500;
	--lvt-z-panel: 510;
}

.lvt-site-shop {
	--lvt-font-body: Arial, Helvetica, sans-serif;
	--lvt-font-heading: Arial, Helvetica, sans-serif;
	--lvt-c-muted: #767676;
	--lvt-c-sub: #838383;
	--lvt-nav-hover-color: #352F2D;
	--lvt-ease-nav: cubic-bezier(.19, 1, .22, 1);
	--lvt-logo-gap: 10px;
	--lvt-logo-mobile-w: 67px;
}

@media (max-width: 1024px) {
	:root {
		--lvt-gutter: 32px;
		--lvt-bar-h: 60px;
		--lvt-topbar-h: 0px;
	}

	.lvt-site-shop {
		--lvt-section-gap: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--lvt-gutter: 16px;
		--lvt-fs-body: 14px;
		--lvt-lh-body: 20px;
	}
}