/**
 * Design Tokens
 *
 * Based on DES Design System V1.2
 * @package baansuan-duangporn
 * @version 0.1.0
 */

:root {
	/* Color tokens */
	--color-primary: #0B4000;
	--color-background: #FFFDF6;
	--color-secondary: #3B5D38;
	--color-accent: #5E2F22;

	/* Text colors */
	--color-text-primary: #1a1a1a;
	--color-text-secondary: #666666;
	--color-text-light: #999999;
	--color-text-inverse: #FFFDF6; /* text on dark backgrounds (Warm Ivory) */

	/* Spacing tokens */
	--space-xs: 4px;
	--space-s: 8px;
	--space-m: 16px;
	--space-l: 24px;
	--space-xl: 32px;

	/* Typography tokens */
	--font-display: Georgia, 'Times New Roman', serif; /* calm, timeless serif — no script/cursive fallback */
	--font-body: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
	--font-size-display: 3rem;
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.5rem;
	--font-size-body: 1rem;
	--font-size-small: 0.875rem;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.8;

	/* Border radius tokens */
	--radius-small: 4px;
	--radius-medium: 8px;
	--radius-large: 12px;
	--radius-pill: 9999px;

	/* Shadow tokens */
	--shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-floating: 0 8px 16px rgba(0, 0, 0, 0.2);

	/* Layout tokens */
	--header-height: 80px; /* shared by sticky header, anchor offset, hero */
	--section-spacing: 64px; /* vertical rhythm between homepage sections */

	/* Breakpoints (for reference in CSS media queries) */
	--breakpoint-mobile: 375px;
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1024px;
	--breakpoint-wide: 1320px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text-primary: #f0f0f0;
		--color-text-secondary: #cccccc;
		--color-text-light: #999999;
	}
}