/**
 * Shared semantic design tokens for TrendShelf public interfaces.
 * Page and component styles consume these tokens without owning shared layout.
 */
:root {
	/* Color */
	--ts-color-canvas: #f6f8fb;
	--ts-color-surface: #ffffff;
	--ts-color-elevated: #ffffff;
	--ts-color-text: #152033;
	--ts-color-text-secondary: #3f4b5f;
	--ts-color-text-muted: #667085;
	--ts-color-border: #dce2ea;
	--ts-color-brand: #17365d;
	--ts-color-accent: #2f6fed;
	--ts-color-positive: #16735b;
	--ts-color-negative: #b5473c;
	--ts-color-neutral: #667085;
	--ts-color-highlight: #eef4ff;
	--ts-color-focus: #0b57d0;
	--ts-color-cta: #17365d;
	--ts-color-cta-hover: #102a4a;

	/* Typography */
	--ts-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--ts-font-size-display: 2.5rem;
	--ts-line-height-display: 1.2;
	--ts-font-size-h1: 2rem;
	--ts-line-height-h1: 1.25;
	--ts-font-size-h2: 1.5rem;
	--ts-line-height-h2: 1.3333;
	--ts-font-size-h3: 1.125rem;
	--ts-line-height-h3: 1.4444;
	--ts-font-size-body: 1rem;
	--ts-line-height-body: 1.6875;
	--ts-font-size-small: 0.875rem;
	--ts-line-height-small: 1.5;
	--ts-font-size-label: 0.75rem;
	--ts-line-height-label: 1.5;
	--ts-font-numeric: tabular-nums;

	/* Spacing */
	--ts-space-1: 4px;
	--ts-space-2: 8px;
	--ts-space-3: 12px;
	--ts-space-4: 16px;
	--ts-space-5: 20px;
	--ts-space-6: 24px;
	--ts-space-8: 32px;
	--ts-space-10: 40px;
	--ts-space-12: 48px;
	--ts-space-16: 64px;
	--ts-space-20: 80px;

	/* Layout */
	--ts-width-wide: 1200px;
	--ts-width-standard: 1120px;
	--ts-width-reading: 820px;
	--ts-gutter-desktop: 32px;
	--ts-gutter-tablet: 24px;
	--ts-gutter-mobile: 16px;

	/* Shape and elevation */
	--ts-radius-sm: 6px;
	--ts-radius-md: 8px;
	--ts-radius-lg: 12px;
	--ts-radius-hero: 16px;
	--ts-radius-pill: 999px;
	--ts-border-width: 1px;
	--ts-border-default: var(--ts-border-width) solid var(--ts-color-border);
	--ts-shadow-elevated: 0 8px 24px rgba(21, 32, 51, 0.08);

	/* Card and media components */
	--ts-card-bg: #ffffff;
	--ts-card-border: 1px solid #dce2ea;
	--ts-card-border-hover: #b8c5d6;
	--ts-card-radius: 12px;
	--ts-card-padding: 16px;
	--ts-card-gap: 12px;
	--ts-card-title-size: 1rem;
	--ts-card-meta-size: 0.8125rem;
	--ts-media-bg: #f2f5f8;
	--ts-media-placeholder-bg: #edf1f5;
	--ts-trend-positive: #16735b;
	--ts-trend-positive-soft: #eaf7f2;
	--ts-trend-negative: #b5473c;
	--ts-trend-negative-soft: #fff0ee;
	--ts-trend-neutral: #667085;
	--ts-trend-neutral-soft: #eef1f5;

	/* Interaction */
	--ts-focus-width: 2px;
	--ts-focus-offset: 2px;
	--ts-motion-fast: 150ms;
	--ts-motion-base: 200ms;
}

body.trendshelf-home-page,
body.trendshelf-category-page,
body.trendshelf-product-page,
body.trendshelf-legal-page {
	margin: 0;
	background: var(--ts-color-canvas);
}