/*
 * Buccos design tokens.
 *
 * Values lifted from the live site's ACF "Colors & Styling" and typography
 * options so the rebuild matches what is on buccosroofing.com today.
 * Change a token here, not a hard coded value in a component.
 */

:root {
	/* Brand */
	--bc-yellow: #ffd300;
	--bc-yellow-dark: #b48700;
	--bc-black: #111111;
	--bc-ink: #1a1a1a;
	--bc-off-black: #0b0b0b;
	--bc-panel: #181818;
	--bc-footer-bg: #101010;
	--bc-white: #ffffff;
	--bc-near-white: #fafafa;
	--bc-cream: #f5f5f0;
	--bc-grey-100: #f2f2f2;
	--bc-grey-300: #deded8;
	--bc-grey-400: #d9d9d2;
	--bc-grey-600: #5e5e5e;
	--bc-grey-700: #484848;
	--bc-border-dark: #303030;
	--bc-danger: #b32d2e;

	/* Type */
	--bc-font-heading: 'Barlow Semi Condensed', Arial, sans-serif;
	--bc-font-body: 'Open Sans', Arial, sans-serif;
	--bc-heading-weight: 900;
	--bc-body-weight: 400;

	--bc-h1: 52px;
	--bc-h1-tablet: 40px;
	--bc-h1-mobile: 32px;
	--bc-h2: 44px;
	--bc-h2-tablet: 30px;
	--bc-h3: 38px;
	--bc-h3-tablet: 26px;

	--bc-body-size: 17px;
	--bc-body-size-mobile: 16px;
	--bc-body-line: 1.65;
	--bc-small: 14px;
	--bc-eyebrow: 13px;

	/* Buttons, matching options_btn_primary and options_btn_secondary */
	--bc-btn-primary-bg: var(--bc-yellow);
	--bc-btn-primary-text: var(--bc-ink);
	--bc-btn-primary-border: var(--bc-black);
	--bc-btn-primary-hover-bg: var(--bc-yellow);
	--bc-btn-primary-hover-text: var(--bc-near-white);

	--bc-btn-secondary-bg: var(--bc-black);
	--bc-btn-secondary-text: var(--bc-near-white);
	--bc-btn-secondary-border: var(--bc-yellow);
	--bc-btn-secondary-hover-text: var(--bc-near-white);

	--bc-btn-size: 16px;
	--bc-btn-pad: 17px 30px;
	--bc-btn-min-h: 56px;

	/* Layout */
	--bc-wrap: 1180px;
	--bc-gutter: 28px;
	--bc-gutter-mobile: 16px;
	--bc-section-y: 90px;
	--bc-section-y-mobile: 56px;

	/* Motion and depth */
	--bc-shadow-card: 0 14px 34px rgba(0, 0, 0, .07);
	--bc-shadow-card-hover: 0 22px 50px rgba(0, 0, 0, .16);
	--bc-shadow-hard: 8px 8px 0 rgba(0, 0, 0, .18);
	--bc-ease: .2s ease;

	/* Chrome */
	--bc-utility-h: 40px;
	--bc-locbar-h: 46px;
	--bc-header-h: 108px;
	--bc-logo-h: 84px;
}

@media (max-width: 1020px) {
	:root {
		--bc-h1: var(--bc-h1-tablet);
		--bc-h2: var(--bc-h2-tablet);
		--bc-h3: var(--bc-h3-tablet);
	}
}

@media (max-width: 680px) {
	:root {
		--bc-header-h: 76px;
		--bc-logo-h: 56px;
		--bc-h1: var(--bc-h1-mobile);
		--bc-body-size: var(--bc-body-size-mobile);
		--bc-gutter: var(--bc-gutter-mobile);
		--bc-section-y: var(--bc-section-y-mobile);
	}
}