/**
 * CSS 變數定義
 * @package mytheme
 */

:root {
	/* ============================================
	   配色系統：白色背景 + 橘色強調
	   ============================================ */

	/* 藍色主色系 */
	--color-primary: #FFAB36;
	/* 主色橘 */
	--color-primary-dark: #FFD036;
	/* 深黃 */
	--color-primary-light: #FFFCD7;
	/* 淺黃 */

	/* 中性色 */
	--color-secondary: #6b7280;
	/* 中灰色 */
	--color-secondary-dark: #374151;
	/* 深灰色 */
	--color-secondary-light: #e5e7eb;
	/* 淺灰色 */

	/* 功能色 */
	--color-success: #10b981;
	/* 成功綠 */
	--color-warning: #f59e0b;
	/* 警告黃 */
	--color-danger: #ef4444;
	/* 危險紅 */
	--color-info: #06b6d4;
	/* 信息青 */

	/* 基礎色 */
	--color-white: #ffffff;
	/* 純白 */
	--color-black: #000000;
	/* 純黑 */
	--color-gray-light: #f9fafb;
	/* 極淺灰 */
	--color-gray: #e5e7eb;
	/* 淺灰 */
	--color-gray-dark: #374151;
	/* 深灰 */
	--color-gray-darker: #1f2937;
	/* 極深灰 */

	/* 文本顏色 */
	--text-color: #000;
	/* 深灰文字 */
	--text-color-light: #6b7280;
	/* 中灰文字 */
	--text-color-lighter: #9ca3af;
	/* 淺灰文字 */

	/* ============================================
	   背景顏色：所有區塊都是白色或淺色
	   ============================================ */
	--bg-color: #ffffff;
	/* 主背景：純白 */
	--bg-color-light: #ffffff;
	/* 淺背景：純白 */
	--bg-color-gray: #f9fafb;
	/* 灰背景：極淺灰 */
	--bg-color-blue-light: #eff6ff;
	/* 藍色背景：超淺藍 */
	--bg-color-slate: #f3f4f6;
	/* 灰藍背景：淺灰 */
	--bg-color-sky: #f0f9ff;
	/* 天空背景：超淺藍 */

	/* 邊框顏色 */
	--border-color: #e5e7eb;
	/* 主邊框 */
	--border-color-light: #f3f4f6;
	/* 淺邊框 */

	/* 陰影 */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.2);

	/* 字體 */
	--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--font-family-mono: 'Courier New', monospace;

	/* 全域字體大小 */
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.75rem;
	--font-size-4xl: 3rem;

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

	/* 行高 */
	--line-height-tight: 1.2;
	--line-height-normal: 1.6;
	--line-height-relaxed: 1.8;

	/* 間距 */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;
	--spacing-4xl: 5rem;

	/* 邊框半徑 */
	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.5rem;
	--border-radius-lg: 0.75rem;
	--border-radius-xl: 1rem;
	--border-radius-full: 9999px;

	/* 過渡 */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;

	/* Z-index */
	--z-index-hide: -1;
	--z-index-auto: auto;
	--z-index-base: 0;
	--z-index-dropdown: 1000;
	--z-index-sticky: 1010;
	--z-index-fixed: 1020;
	--z-index-offcanvas: 1030;
	--z-index-modal-backdrop: 1040;
	--z-index-modal: 1050;
	--z-index-popover: 1060;
	--z-index-tooltip: 1070;

	/* 容器寬度 */
	--container-width-sm: 33.75rem;
	--container-width-md: 45rem;
	--container-width-lg: 60rem;
	--container-width-xl: 90rem;
	--container-max-width: 90rem;

	/* 斷點 */
	--breakpoint-xs: 0;
	--breakpoint-sm: 36rem;
	--breakpoint-md: 48rem;
	--breakpoint-lg: 62rem;
	--breakpoint-xl: 75rem;
	--breakpoint-2xl: 87.5rem;
}

@media (max-width: 1440px) {
	:root {
		--spacing-3xl: 3.5rem;
		--spacing-4xl: 4rem;
		--container-max-width: 95%;
	}
}

@media (max-width: 1024px) {
	:root {
		--font-size-base: 0.9375rem;
		--font-size-lg: 1.0625rem;
		--spacing-2xl: 2.5rem;
		--spacing-3xl: 3rem;
		--container-max-width: 95%;
	}
}

@media (max-width: 480px) {

	/* 手機設備 (max-width: 480px) */
	:root {
		--font-size-base: 0.875rem;
		/* 14px */
		--font-size-lg: 1rem;
		/* 16px */
		--font-size-xl: 1.125rem;
		/* 18px */
		--font-size-2xl: 1.375rem;
		/* 22px */
		--font-size-3xl: 1.625rem;
		/* 26px */
		--font-size-4xl: 1.75rem;
		/* 28px */
		--spacing-xl: 1.5rem;
		/* 24px */
		--spacing-2xl: 2rem;
		/* 32px */
		--spacing-3xl: 2.5rem;
		/* 40px */
		--spacing-4xl: 3rem;
		/* 48px */
		--container-max-width: 100%;
	}
}

/* 高對比度模式 */
@media (prefers-contrast: more) {
	:root {
		--color-primary: #0028a1;
		--color-secondary: #333;
		--text-color: #000;
		--border-color: #333;
	}

	.btn-primary {
		text-decoration: underline;
	}
}

/* 低動畫模式 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}