/**
 * PK Royal Commerce — Design Tokens
 * Source of truth: docs/DESIGN-SYSTEM.md
 * These CSS custom properties are the single palette/scale reference for
 * every component in main.css and WooCommerce template overrides. Do not
 * hardcode raw color/spacing values elsewhere — reference a token.
 */

:root {
	/* ---------------------------------------------------------------
	 * Color — core brand palette
	 * Gold is the house accent everywhere else, including functional UI
	 * states such as support-ticket status and message-sender indicators.
	 * Queen's Collection is the deliberate exception: its brand identity
	 * (Royal Collections card, "Explore Queen's Collection" CTA, and its
	 * product-card border in the shop grid) uses --pkr-violet /
	 * --pkr-violet-light / --pkr-border-violet instead of gold. Do not
	 * reach for these tokens anywhere else -- use the gold tokens instead.
	 * --------------------------------------------------------------- */
	--pkr-black: #090909;
	--pkr-panel: #121212;
	--pkr-panel-2: #1a1a1a;
	--pkr-gold: #D6B15D;
	--pkr-gold-light: #F0D58B;
	--pkr-violet: #6D3CA3;
	--pkr-violet-light: #8f5fc4;
	--pkr-cream: #F6F1E8;
	--pkr-muted: #B9B2A7;
	--pkr-border: rgba(214, 177, 93, 0.25);
	--pkr-border-strong: rgba(214, 177, 93, 0.4);
	--pkr-border-violet: rgba(109, 60, 163, 0.35);
	--pkr-success: #4caf82;
	--pkr-error: #d95c5c;
	--pkr-overlay: rgba(9, 9, 9, 0.72);

	/* ---------------------------------------------------------------
	 * Typography
	 * --------------------------------------------------------------- */
	--pkr-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
	--pkr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--pkr-font-size-base: 16px;
	--pkr-line-height-body: 1.55;
	--pkr-h1-size: clamp(2.2rem, 4vw, 3.5rem);

	/* ---------------------------------------------------------------
	 * Spacing scale (8px base)
	 * Every step is N * 8px -- --pkr-space-5/-7/-10 (40px/56px/80px)
	 * complete that progression. They were referenced throughout
	 * main.css (jump-nav breathing room, hero padding) without ever
	 * being defined here, so they silently resolved to 0 (go-live
	 * readiness audit, Design/Brand Audit §1, P0).
	 * --------------------------------------------------------------- */
	--pkr-space-1: 8px;
	--pkr-space-2: 16px;
	--pkr-space-3: 24px;
	--pkr-space-4: 32px;
	--pkr-space-5: 40px;
	--pkr-space-6: 48px;
	--pkr-space-7: 56px;
	--pkr-space-8: 64px;
	--pkr-space-10: 80px;
	--pkr-space-12: 96px;

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--pkr-shell-max: 1680px;
	--pkr-gutter-mobile: 16px;
	--pkr-gutter-desktop: 40px;
	--pkr-section-gap-desktop: 96px;
	--pkr-section-gap-mobile: 56px;

	/* ---------------------------------------------------------------
	 * Radius
	 * --------------------------------------------------------------- */
	--pkr-radius-sm: 4px;
	--pkr-radius-md: 12px;
	--pkr-radius-pill: 999px;

	/* ---------------------------------------------------------------
	 * Elevation / focus
	 * --------------------------------------------------------------- */
	--pkr-shadow-card: 0 20px 45px rgba(0, 0, 0, 0.35);
	--pkr-focus-ring: 2px solid var(--pkr-gold-light);
	--pkr-focus-offset: 2px;

	/* ---------------------------------------------------------------
	 * Breakpoints (referenced in comments only — CSS cannot read
	 * custom properties inside @media, kept here for documentation)
	 * 480 / 768 / 1024 / 1280
	 * --------------------------------------------------------------- */

	/* ---------------------------------------------------------------
	 * Motion
	 * --------------------------------------------------------------- */
	--pkr-transition-fast: 150ms ease;
	--pkr-transition-base: 250ms ease;
	--pkr-transition-drawer: 320ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ---------------------------------------------------------------
	 * z-index scale
	 * --------------------------------------------------------------- */
	--pkr-z-header: 100;
	--pkr-z-drawer: 200;
	--pkr-z-overlay: 190;
	--pkr-z-modal: 300;
}