/*
 * Delight design tokens (v1)
 *
 * Source of truth for color / typography / spacing / radius scales.
 * Referenced from style.css and template parts. Update here and the rest follows.
 * Decisions live in docs/12-design-direction.md.
 */

:root {
	/* Color — D' palette (2026-05-17 lock) */
	--color-bg: #FFFFFF;
	--color-surface: #FAFAFA;
	--color-text: #1A1A1A;
	--color-text-mute: #5C5C5C;
	--color-accent: #1E5285;
	--color-accent-light: #629DD1;
	--color-line: #E5E7EB;
	--color-dark: #0F1419;

	/* Type families.
	 * font-body / font-heading are single resolved lists (Manrope first for
	 * Latin, Noto Sans JP for CJK fallback, then system fonts, then generic).
	 * We do NOT compose --font-body via `var(font-en), var(font-jp)` because
	 * each --font-sans-* expands to a list ending in `sans-serif`, and the
	 * concatenation would put 'Noto Sans JP' AFTER the generic — meaning the
	 * JP font would never be used in practice. */
	--font-sans-en: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-sans-jp: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Manrope', 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-heading: 'Noto Sans JP', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Type scale */
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 15px;
	--text-lg: 18px;
	--text-xl: 22px;
	--text-2xl: 28px;
	--text-3xl: 36px;
	--text-4xl: 48px;
	--text-hero: 52px;   /* hero h1 only; sits between 4xl (48) and 5xl (60). docs/12 §2 */
	--text-5xl: 60px;

	/* Line heights */
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;
	--leading-loose: 1.85;

	/* Spacing scale (4px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 112px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 16px;

	/* Container width */
	--container-max: 1200px;

	/* Z-index */
	--z-nav: 100;
	--z-modal: 200;
	--z-toast: 300;
}