/*
 * Persia Trade — design tokens.
 *
 * The only file allowed to contain raw colours, sizes and shadows.
 * Primitives describe the palette; components must use the semantic layer.
 * テーマ設定 (inc/options/output.php) overrides the semantic colours, fonts and radius.
 */

:root {
	/* ---------- Primitive palette ---------- */
	--crimson-50: #fdf5f7;
	--crimson-100: #fce8f0;
	--crimson-200: #f3d3df;
	--crimson-300: #e3a8be;
	--crimson-400: #c94f7c;
	--crimson-500: #b0245a;
	--crimson-600: #9b1b4b;
	--crimson-700: #7a1038;
	--crimson-800: #5c0c2a;
	--crimson-900: #3d081c;

	--gray-0: #ffffff;
	--gray-50: #fafafa;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;
	--black: #000000;

	--green-600: #15803d;
	--green-200: #bbf7d0;
	--green-50: #f0fdf4;
	--amber-500: #e0a100;
	--amber-700: #b45309;
	--amber-200: #fde68a;
	--amber-100: #fef3c7;
	--amber-50: #fffbeb;
	--orange-400: #f7a64e;
	--orange-500: #ef9636;
	--orange-900: #7a3d12;
	--red-500: #ef4444;
	--red-600: #b91c1c;
	--red-200: #fecaca;
	--red-50: #fef2f2;
	--blue-700: #1d4ed8;
	--blue-200: #bfdbfe;
	--blue-50: #eff6ff;

	/* ---------- Semantic colours ---------- */
	--color-primary: var(--crimson-600);
	--color-primary-strong: var(--crimson-700);
	--color-primary-soft: var(--crimson-50);
	--color-primary-tint: color-mix(in srgb, var(--color-primary) 12%, transparent);
	--color-primary-border: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));
	--color-on-primary: var(--gray-0);

	--color-bg: var(--gray-0);
	--color-surface: var(--gray-0);
	--color-surface-alt: var(--gray-50);
	--color-surface-sunken: var(--gray-100);
	--color-surface-glass: rgba(255, 255, 255, 0.94);
	--color-surface-inverse: var(--gray-800);
	--color-overlay: rgba(17, 24, 39, 0.5);
	--color-overlay-strong: rgba(17, 24, 39, 0.72);
	--color-scrim: rgba(20, 10, 15, 0.45);
	--color-shadow-strong: rgba(0, 0, 0, 0.25);

	--color-text: var(--gray-800);
	--color-text-muted: var(--gray-500);
	--color-text-subtle: var(--gray-400);
	--color-text-inverse: var(--gray-0);
	--color-heading: var(--color-text);
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-primary-strong);

	--color-border: var(--gray-200);
	--color-border-strong: var(--gray-300);
	--color-border-subtle: var(--gray-100);

	--color-sale: var(--color-primary);
	--color-rating: var(--amber-500);
	--color-success: var(--green-600);
	--color-success-soft: var(--green-50);
	--color-warning: var(--amber-700);
	--color-warning-soft: var(--amber-50);
	--color-danger: var(--red-600);
	--color-danger-soft: var(--red-50);
	--color-info: var(--blue-700);
	--color-info-soft: var(--blue-50);

	--color-promo: linear-gradient(180deg, var(--orange-400) 0%, var(--orange-500) 100%);
	--color-promo-ink: var(--orange-900);
	--color-sold: linear-gradient(180deg, var(--red-500) 0%, var(--red-600) 100%);

	--color-focus: var(--color-primary);

	/* ---------- Typography ---------- */
	--font-sans: "Noto Sans JP", sans-serif;
	--font-serif: "Shippori Mincho", serif;
	--font-body: var(--font-sans);
	--font-heading: var(--font-serif);

	--fs-3xs: 0.625rem;   /* 10 */
	--fs-2xs: 0.6875rem;  /* 11 */
	--fs-xs: 0.75rem;     /* 12 */
	--fs-sm: 0.8125rem;   /* 13 */
	--fs-md: 0.875rem;    /* 14 */
	--fs-base: 1rem;      /* 16 */
	--fs-lg: 1.125rem;    /* 18 */
	--fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19 → 22 */
	--fs-2xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);     /* 22 → 28 */
	--fs-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);     /* 28 → 40 */
	--fs-4xl: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);        /* 32 → 52 */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	--lh-none: 1;
	--lh-tight: 1.25;
	--lh-snug: 1.45;
	--lh-normal: 1.6;
	--lh-relaxed: 1.75;
	--lh-loose: 1.9;

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

	/* ---------- Spacing (4px base) ---------- */
	--space-0: 0;
	--space-px: 1px;
	--space-0-5: 2px;
	--space-1: 4px;
	--space-1-5: 6px;
	--space-2: 8px;
	--space-2-5: 10px;
	--space-3: 12px;
	--space-3-5: 14px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;
	--space-20: 80px;

	--section-space: clamp(var(--space-10), 5vw, var(--space-16));
	--gutter: var(--space-4);

	/* ---------- Radius ---------- */
	--radius-none: 0;
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 28px;
	--radius-pill: 999px;
	--radius-round: 50%;

	/* ---------- Elevation ---------- */
	--shadow-xs: 0 1px 3px rgba(17, 24, 39, 0.08);
	--shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.1);
	--shadow-md: 0 8px 24px rgba(17, 24, 39, 0.1);
	--shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.14);
	--shadow-xl: 0 24px 56px rgba(17, 24, 39, 0.2);
	--shadow-up: 0 -1px 0 rgba(17, 24, 39, 0.06), 0 -6px 20px rgba(17, 24, 39, 0.06);
	--shadow-promo: 0 3px 9px rgba(231, 140, 46, 0.24);
	--shadow-primary: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
	--shadow-focus-danger: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent);
	--shadow-ring-success: 0 0 0 6px color-mix(in srgb, var(--color-success) 14%, transparent);
	--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus) 22%, transparent);

	/* ---------- Motion ---------- */
	--dur-instant: 0.1s;
	--dur-fast: 0.15s;
	--dur-base: 0.2s;
	--dur-slow: 0.3s;
	--dur-slower: 0.5s;
	--ease-standard: ease;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-drawer: cubic-bezier(0.19, 1, 0.22, 1);

	/* ---------- Layers ---------- */
	--z-base: 1;
	--z-raised: 5;
	--z-sticky: 30;
	--z-dropdown: 40;
	--z-header: 50;
	--z-app-bar: 60;
	--z-overlay: 90;
	--z-drawer: 100;
	--z-modal: 1000;
	--z-toast: 1100;

	/* ---------- Layout ---------- */
	--container: 1120px;
	--container-narrow: 740px;
	--container-wide: 1320px;
	--container-header: 1440px;
	--container-pad: 32px;

	/* ---------- Media ---------- */
	--ratio-product: 4 / 3;

	/* ---------- Controls ---------- */
	--control-h-sm: 36px;
	--control-h: 44px;
	--control-h-lg: 52px;
	--border-width: 1px;
	--border-width-strong: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0s;
		--dur-base: 0s;
		--dur-slow: 0s;
		--dur-slower: 0s;
	}
}