/*
 Theme Name:   TailPlay
 Theme URI:    https://tailplay.eu
 Author:       TailPlay
 Description:  Custom lightweight WooCommerce theme for TailPlay — premium pet brand. Elegant, modern, conversion-focused.
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  tailplay
*/

/* ==========================================================================
   DESIGN TOKENS — TailPlay design system
   ========================================================================== */

:root {
	/* ---- Colors (approved palette) ---- */
	--tp-green: #1F3D2B;
	--tp-sand: #E6D8C3;
	--tp-cream: #F5F2EB;
	--tp-charcoal: #2B2B2B;
	--tp-gray: #D9D2C7;
	--tp-orange: #E07A3F;

	/* Semantic */
	--tp-bg: var(--tp-cream);
	--tp-bg-soft: var(--tp-sand);
	--tp-text: var(--tp-charcoal);
	--tp-text-muted: #5a5a5a;
	--tp-heading: var(--tp-charcoal);
	--tp-border: var(--tp-gray);
	--tp-cta-bg: var(--tp-green);
	--tp-cta-text: #fff;
	--tp-accent: var(--tp-orange);
	--tp-link: var(--tp-green);
	--tp-link-hover: #2a5238;

	/* ---- Typography ---- */
	--tp-font-display: "Cinzel Decorative", serif;
	--tp-font-body: "DM Sans", system-ui, sans-serif;

	--tp-text-xs: 0.75rem;
	--tp-text-sm: 0.875rem;
	--tp-text-base: 1rem;
	--tp-text-lg: 1.125rem;
	--tp-text-xl: 1.25rem;
	--tp-text-2xl: 1.5rem;
	--tp-text-3xl: 2rem;
	--tp-text-display: clamp(2rem, 5vw, 3rem);

	--tp-leading-tight: 1.25;
	--tp-leading-snug: 1.375;
	--tp-leading-normal: 1.6;
	--tp-leading-relaxed: 1.625;

	/* ---- Spacing & rhythm ---- */
	--tp-space-3xs: 0.25rem;
	--tp-space-2xs: 0.5rem;
	--tp-space-xs: 0.75rem;
	--tp-space-sm: 1rem;
	--tp-space-md: 1.5rem;
	--tp-space-lg: 2rem;
	--tp-space-xl: 2.5rem;
	--tp-space-2xl: 3rem;
	--tp-space-3xl: 4rem;
	--tp-space-4xl: 6rem;
	--tp-space-5xl: 8rem;

	/* ---- Layout ---- */
	--tp-container: min(100% - 2 * var(--tp-space-lg), 1200px);
	--tp-container-narrow: min(100% - 2 * var(--tp-space-lg), 720px);
	--tp-section-y: var(--tp-space-3xl);
	--tp-section-y-lg: var(--tp-space-4xl);

	/* ---- UI ---- */
	--tp-radius: 6px;
	--tp-radius-lg: 10px;
	--tp-radius-xl: 14px;
	--tp-shadow: 0 2px 12px rgba(43, 43, 43, 0.06);
	--tp-shadow-md: 0 4px 20px rgba(43, 43, 43, 0.08);
	--tp-shadow-lg: 0 8px 32px rgba(43, 43, 43, 0.1);
	--tp-transition: 0.2s ease;
}

/* ==========================================================================
   BASE — reset, typography, layout
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
body.tp-theme {
	font-family: var(--tp-font-body);
	font-size: var(--tp-text-base);
	line-height: var(--tp-leading-normal);
	color: var(--tp-text);
	background-color: var(--tp-bg);
	margin: 0;
}

/* Display font: Cinzel Decorative — only for branding / premium display */
.tp-display,
.tp-logo-text,
h1.tp-brand-heading,
.tp-trust-bar__title {
	font-family: var(--tp-font-display);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tp-font-body);
	font-weight: 600;
	color: var(--tp-heading);
	line-height: var(--tp-leading-tight);
	margin-top: 0;
	margin-bottom: var(--tp-space-sm);
}

h1 { font-size: var(--tp-text-3xl); }
h2 { font-size: var(--tp-text-2xl); }
h3 { font-size: var(--tp-text-xl); }

p {
	margin-top: 0;
	margin-bottom: var(--tp-space-md);
}

a,
body.tp-theme a {
	color: var(--tp-link);
	text-decoration: none;
	transition: color var(--tp-transition);
}

a:hover,
body.tp-theme a:hover {
	color: var(--tp-link-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Container ---- */
.tp-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--tp-space-lg);
	padding-right: var(--tp-space-lg);
}

.tp-container--narrow {
	max-width: 720px;
}

/* ---- Section rhythm ---- */
.tp-section {
	padding-top: var(--tp-section-y);
	padding-bottom: var(--tp-section-y);
}

.tp-section--lg {
	padding-top: var(--tp-section-y-lg);
	padding-bottom: var(--tp-section-y-lg);
}

.tp-section--alt {
	background-color: var(--tp-bg-soft);
}