/*
Theme Name: CopperTicket
Theme URI: https://copperticket.com/
Description: A performance-focused Blocksy child theme for the CopperTicket philatelic storefront.
Author: CopperTicket
Author URI: https://copperticket.com/
Template: blocksy
Version: 0.4.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: copperticket
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--ct-color-white: #ffffff;
	--ct-color-ivory: #f8f6f1;
	--ct-color-charcoal: #242321;
	--ct-color-charcoal-soft: #46433f;
	--ct-color-gold: #a47d3b;
	--ct-color-gold-dark: #765824;
	--ct-color-border: #ddd7cd;
	--ct-color-error: #a52222;
	--ct-shadow-soft: 0 18px 50px rgb(36 35 33 / 8%);
	--ct-radius-small: 0.25rem;
	--ct-radius-medium: 0.5rem;
	--ct-content-width: 1280px;
	--ct-transition: 180ms ease;
}

body {
	background: var(--ct-color-white);
	color: var(--ct-color-charcoal);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

a {
	text-underline-offset: 0.18em;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--ct-color-gold);
	outline-offset: 3px;
}

::selection {
	background: var(--ct-color-gold);
	color: var(--ct-color-white);
}

.ct-eyebrow {
	color: var(--ct-color-gold-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ct-button,
.ct-home .button {
	border-radius: var(--ct-radius-small);
	font-weight: 700;
	transition: background-color var(--ct-transition), color var(--ct-transition), transform var(--ct-transition);
}

.ct-button:hover,
.ct-home .button:hover {
	transform: translateY(-1px);
}

.ct-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.3rem;
	background: var(--ct-color-charcoal);
	color: var(--ct-color-white);
	text-decoration: none;
}

.ct-button:hover {
	background: var(--ct-color-gold-dark);
	color: var(--ct-color-white);
}

.ct-button--secondary {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--ct-color-charcoal);
}

.ct-button--secondary:hover {
	background: var(--ct-color-charcoal);
	color: var(--ct-color-white);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}