/**
 * Design tokens.
 *
 * Colour values, breakpoints and the type scale are measured from the reference
 * storefront; the spacing/radius scale follows Tailwind's defaults because the
 * reference is a Tailwind build.
 */

:root {
	/* Brand — HalfTicket raspberry. A saturated mid-dark pink that carries white
	 * text at 5.0:1, so fills use white text; --pl-primary-ink is the deeper
	 * shade for pink text on light surfaces (5.9:1 on white). */
	--pl-primary: #d81b60;        /* raspberry — fills, chips, accents         */
	--pl-primary-hover: #c2185b;  /* fill hover                                */
	--pl-primary-ink: #ad1457;    /* pink text on white — AA                   */
	--pl-primary-deep: #880e4f;   /* text hover, deep accents                  */
	--pl-on-primary: #ffffff;     /* text/icons sitting on a raspberry fill    */

	/* Secondary accent — ticket-stub yellow, used for highlights and the wordmark dot. */
	--pl-lime-brand: #f59e0b;
	--pl-lime-bright: #fbbf24;

	/* Surfaces — warm stone rather than cool slate. */
	--pl-bg-white: #fff;
	--pl-bg-alt: #faf8f6;   /* warm off-white */
	--pl-bg-dark: #1c1917;  /* stone-900      */

	/* Text */
	--pl-text-primary: #1c1917;
	--pl-text-secondary: #57534e;
	--pl-text-muted: #78716c;
	--pl-text-invert: #fafaf9;

	/* Lines */
	--pl-border-light: #e7e5e4;
	--pl-border-mid: #d6d3d1;

	/* Status */
	--pl-sale: #dc2626;
	--pl-star: #f59e0b;

	/* Type */
	--pl-font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--pl-fs-hero: 2.25rem;      /* 36px mobile, scales to 60px at lg */
	--pl-fs-h2: 1.5rem;         /* 24px mobile, 30px at sm           */
	--pl-fs-h3: 1.25rem;        /* 20px  category card               */
	--pl-fs-card: 1rem;         /* 16px  product card, home          */
	--pl-fs-card-sm: 0.875rem;  /* 14px  product card, catalogue     */
	--pl-fs-body: 0.9375rem;    /* 15px                              */
	--pl-fs-sm: 0.8125rem;      /* 13px                              */
	--pl-fs-xs: 0.75rem;        /* 12px  eyebrows, badges            */

	--pl-lh-tight: 1.15;
	--pl-lh-snug: 1.35;
	--pl-lh-body: 1.6;

	--pl-track-eyebrow: 0.14em;
	--pl-track-tight: -0.02em;

	/* Layout */
	--pl-container: 80rem;      /* 1280px */
	--pl-gutter: 1rem;
	--pl-gutter-lg: 2rem;       /* 32px, giving the 1216px content width */

	/* Spacing (Tailwind scale) */
	--pl-space-1: 0.25rem;
	--pl-space-2: 0.5rem;
	--pl-space-3: 0.75rem;
	--pl-space-4: 1rem;
	--pl-space-5: 1.25rem;
	--pl-space-6: 1.5rem;
	--pl-space-8: 2rem;
	--pl-space-10: 2.5rem;
	--pl-space-12: 3rem;
	--pl-space-16: 4rem;

	/* Section rhythm: py-8 mobile, py-12 from sm up */
	--pl-section-y: var(--pl-space-8);
	--pl-section-gap: var(--pl-space-6);

	/* Radius — tighter than PrimeLink for a sharper, editorial feel. */
	--pl-radius-sm: 0.25rem;
	--pl-radius: 0.375rem;
	--pl-radius-lg: 0.5rem;
	--pl-radius-xl: 0.75rem;
	--pl-radius-2xl: 1rem;     /* hero / story cards */
	--pl-radius-full: 9999px;

	/* Elevation */
	--pl-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
	--pl-shadow: 0 1px 3px rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1);
	--pl-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1);
	--pl-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);

	/* Motion — subtle, matching the reference */
	--pl-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pl-dur-fast: 150ms;
	--pl-dur: 250ms;
	--pl-dur-slow: 400ms;

	/* Chrome */
	--pl-header-h: 4.25rem;
	--pl-z-header: 40;
	--pl-z-drawer: 60;
	--pl-z-modal: 70;
}

/* Fluid type: the reference jumps 36 -> 48 -> 60 across sm/lg. */
@media (min-width: 40rem) {
	:root {
		--pl-fs-hero: 3rem;
		--pl-fs-h2: 1.875rem;
		--pl-section-y: var(--pl-space-12);
		--pl-section-gap: var(--pl-space-8);
	}
}

@media (min-width: 64rem) {
	:root {
		--pl-fs-hero: 3.75rem; /* 60px */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--pl-dur-fast: 0ms;
		--pl-dur: 0ms;
		--pl-dur-slow: 0ms;
	}
}