/**
 * Plush Toys Storefront Child Theme — Design Tokens
 *
 * Playful, confident brand: bright magenta accent on a calm off-white page,
 * navy display headings, and soft cream price pills. Cards are rounded
 * and gently shadowed so product photos feel like cut-out stickers.
 *
 * Dependencies: none. This file must be enqueued first.
 */

:root {
	/* ========================================
	   COLOR — SURFACES
	   ======================================== */

	/** Page background — a cool, near-white with a hint of lavender */
	--color-bg-primary: #F5F5F7;

	/** Cards, nav surfaces, anything that sits on the page */
	--color-bg-card: #FFFFFF;

	/** Subtle tinted surface — used sparingly for rails, footer, insets */
	--color-bg-muted: #ECECF1;

	/* ========================================
	   COLOR — TEXT
	   ======================================== */

	/** Display + body copy — deep navy, not black */
	--color-text-primary: #151530;

	/** Secondary / category / meta */
	--color-text-secondary: #8A8A9B;

	/** Hints, disabled, placeholders */
	--color-text-muted: #B5B5C2;

	/** Text on dark or accent fills */
	--color-text-inverse: #FFFFFF;

	/* ========================================
	   COLOR — ACCENT
	   Magenta is the single brand color — used for
	   the logo, eyebrow labels, cart bubble, the pink
	   underline under section titles, and price copy.
	   ======================================== */

	--color-accent: #E300FF;
	--color-accent-hover: #B800D6;
	--color-accent-soft: rgba(227, 0, 255, 0.08);

	/** Price pill — warm cream that echoes the soft-toy palette */
	--color-price-pill-bg: #FFF3C4;
	--color-price-pill-text: var(--color-accent);

	/* ========================================
	   COLOR — UI
	   ======================================== */

	--color-border: #E2E2EA;
	--color-border-focus: var(--color-accent);

	/** Semantic */
	--color-success: #22C55E;
	--color-error: #E11D48;

	/* ========================================
	   TYPOGRAPHY
	   Quicksand carries headings and body — a rounded
	   humanist sans that matches the soft plush cards.
	   ======================================== */

	--font-display: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'SF Mono', Monaco, Consolas, 'Fira Code', monospace;

	/** Type scale — mobile-first, scales up in typography.css */
	--text-size-xs: 0.75rem;     /* 12 */
	--text-size-sm: 0.875rem;    /* 14 */
	--text-size-base: 1rem;      /* 16 */
	--text-size-md: 1.125rem;    /* 18 */
	--text-size-lg: 1.25rem;     /* 20 */
	--text-size-xl: 1.5rem;      /* 24 */
	--text-size-2xl: 2rem;       /* 32 */
	--text-size-3xl: 2.75rem;    /* 44 */
	--text-size-4xl: 4rem;       /* 64 — display H2 on desktop */

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.08em;
	--tracking-wider: 0.18em;

	/* ========================================
	   SHAPE
	   Generous radii and soft shadows are the two
	   most distinctive traits of the brand.
	   ======================================== */

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;       /* product cards, hero images */
	--radius-xl: 28px;
	--radius-pill: 999px;

	--shadow-card: 0 4px 24px rgba(20, 20, 50, 0.06);
	--shadow-card-hover: 0 12px 40px rgba(20, 20, 50, 0.10);
	--shadow-focus: 0 0 0 3px var(--color-accent-soft);

	/* ========================================
	   SPACING — 8px scale
	   ======================================== */

	--space-0: 0;
	--space-px: 1px;
	--space-0-5: 0.125rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	--section-padding-y: var(--space-20);
	--section-padding-y-sm: var(--space-12);
	--container-padding-x: var(--space-4);

	/* ========================================
	   LAYOUT
	   ======================================== */

	/** Full-bleed layout — content fills the viewport; only the gutter
	    (--container-padding-x) prevents copy from touching the edge. */
	--container-max-width: none;
	--content-max-width: 768px;

	/** Breakpoints — reference only; CSS uses literal values */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	--gap-1: var(--space-2);
	--gap-2: var(--space-4);
	--gap-3: var(--space-6);
	--gap-4: var(--space-8);

	/* ========================================
	   MOTION
	   ======================================== */

	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;
}