/* ========================================
   流光之境 - 設計系統基礎
   Design System Foundation v2.0
   ======================================== */

/* === 字體引入 === */
@import url('fonts.css');

/* ===== 色彩系統 (Color System) ===== */
:root {
  /* === 品牌色彩 (Brand Colors) === */
  --brand-hue: 37;  /* 金棕色色相 */
  --brand-saturation: 40%;
  
  /* 主色調階層 */
  --primary-50: hsl(var(--brand-hue), 65%, 96%);   /* #fdf9f4 */
  --primary-100: hsl(var(--brand-hue), 60%, 90%);  /* #f7ede0 */
  --primary-200: hsl(var(--brand-hue), 55%, 82%);  /* #eed8be */
  --primary-300: hsl(var(--brand-hue), 50%, 74%);  /* #e3c29c */
  --primary-400: hsl(var(--brand-hue), 45%, 66%);  /* #d8ad7a */
  --primary-500: hsl(var(--brand-hue), 40%, 58%);  /* #d4a574 主色 */
  --primary-600: hsl(var(--brand-hue), 38%, 50%);  /* #bf945f */
  --primary-700: hsl(var(--brand-hue), 36%, 42%);  /* #a17d4a */
  --primary-800: hsl(var(--brand-hue), 34%, 34%);  /* #836635 */
  --primary-900: hsl(var(--brand-hue), 32%, 26%);  /* #654f20 */
  
  /* 輔助色階層 */
  --secondary-50: hsl(30, 25%, 95%);   /* #f6f4f2 */
  --secondary-100: hsl(30, 20%, 88%);  /* #ebe5e0 */
  --secondary-200: hsl(30, 18%, 78%);  /* #dbd0c6 */
  --secondary-300: hsl(30, 16%, 68%);  /* #cabbac */
  --secondary-400: hsl(30, 14%, 58%);  /* #b9a692 */
  --secondary-500: hsl(30, 12%, 48%);  /* #8b7355 輔助色 */
  --secondary-600: hsl(30, 15%, 40%);  /* #7a6348 */
  --secondary-700: hsl(30, 18%, 32%);  /* #69533b */
  --secondary-800: hsl(30, 21%, 24%);  /* #58432e */
  --secondary-900: hsl(30, 24%, 16%);  /* #473321 */
  
  /* === 語義色彩 (Semantic Colors) === */
  /* 成功 */
  --success-50: hsl(142, 76%, 96%);
  --success-500: hsl(142, 71%, 45%);
  --success-900: hsl(142, 72%, 20%);
  
  /* 警告 */
  --warning-50: hsl(48, 100%, 96%);
  --warning-500: hsl(45, 93%, 58%);
  --warning-900: hsl(35, 81%, 24%);
  
  /* 錯誤 */
  --error-50: hsl(0, 85%, 97%);
  --error-500: hsl(0, 72%, 51%);
  --error-900: hsl(0, 75%, 25%);
  
  /* 資訊 */
  --info-50: hsl(204, 100%, 97%);
  --info-500: hsl(204, 100%, 50%);
  --info-900: hsl(204, 100%, 24%);
  
  /* === 中性色彩 (Neutral Colors) === */
  --neutral-0: #ffffff;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;
  
  /* === 文字色彩別名 (Text Color Aliases) === */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-on-primary: var(--neutral-0);
  --text-on-dark: var(--neutral-0);
  
  /* === 背景色彩別名 (Background Color Aliases) === */
  --bg-primary: var(--neutral-0);
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-100);
  --bg-elevated: var(--neutral-0);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* === 邊框色彩別名 (Border Color Aliases) === */
  --border-light: var(--neutral-200);
  --border-medium: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus: var(--primary-500);
}

/* ===== 字體系統 (Typography System) ===== */
:root {
  /* === 字體族群 (Font Families) === */
  --font-family-primary: 'HanyiSeaSpray', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-family-heading: 'HanyiSeaSpray', 'Noto Sans TC', 'cwTeXYen', serif;
  --font-family-accent: 'HanyiSeaSpray', 'Amatic SC', cursive;
  --font-family-elegant: 'HanyiSeaSpray', serif;
  --font-family-artistic: 'HanyiSeaSpray', serif;
  --font-family-display: 'HanyiSeaSpray', 'ChenYuluoyan', serif;
  --font-family-handwriting: 'HanyiSeaSpray', cursive;
  --font-family-casual: 'HanyiSeaSpray', 'ChenYuluoyan', cursive;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  
  /* === 字體權重 (Font Weights) === */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-handwriting: normal;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* === 字體大小 (Font Sizes) - 使用 Modular Scale === */
  --font-size-xs: clamp(0.75rem, 0.5vw + 0.65rem, 0.8rem);    /* 12-13px */
  --font-size-sm: clamp(0.875rem, 0.5vw + 0.775rem, 0.9rem);  /* 14-15px */
  --font-size-base: clamp(1rem, 0.5vw + 0.9rem, 1.1rem);      /* 16-18px */
  --font-size-lg: clamp(1.125rem, 1vw + 0.9rem, 1.25rem);     /* 18-20px */
  --font-size-xl: clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem);     /* 20-24px */
  --font-size-2xl: clamp(1.5rem, 2vw + 1rem, 2rem);           /* 24-32px */
  --font-size-3xl: clamp(1.875rem, 3vw + 1rem, 2.5rem);       /* 30-40px */
  --font-size-4xl: clamp(2.25rem, 4vw + 1rem, 3.5rem);        /* 36-56px */
  --font-size-5xl: clamp(3rem, 5vw + 1.5rem, 4.5rem);         /* 48-72px */
  
  /* === 行高 (Line Heights) === */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* === 字母間距 (Letter Spacing) === */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* ===== 間距系統 (Spacing System) ===== */
:root {
  /* === 基礎間距 (Base Spacing) - 8px 系統 === */
  --space-px: 1px;
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */
  --space-48: 12rem;    /* 192px */
  --space-56: 14rem;    /* 224px */
  --space-64: 16rem;    /* 256px */
  
  /* === 響應式間距 (Responsive Spacing) === */
  --space-xs: clamp(var(--space-2), 1vw, var(--space-3));    /* 8-12px */
  --space-sm: clamp(var(--space-3), 2vw, var(--space-4));    /* 12-16px */
  --space-md: clamp(var(--space-4), 3vw, var(--space-6));    /* 16-24px */
  --space-lg: clamp(var(--space-6), 4vw, var(--space-8));    /* 24-32px */
  --space-xl: clamp(var(--space-8), 5vw, var(--space-12));   /* 32-48px */
  --space-2xl: clamp(var(--space-12), 6vw, var(--space-16)); /* 48-64px */
  --space-3xl: clamp(var(--space-16), 8vw, var(--space-24)); /* 64-96px */
}

/* ===== 陰影系統 (Shadow System) ===== */
:root {
  /* === 投影 (Box Shadows) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* === 品牌色彩投影 === */
  --shadow-primary: 0 4px 14px 0 rgba(212, 165, 116, 0.3);
  --shadow-primary-lg: 0 10px 30px 0 rgba(212, 165, 116, 0.2);
  
  /* === 互動投影 === */
  --shadow-focus: 0 0 0 3px rgba(212, 165, 116, 0.3);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* ===== 圓角系統 (Border Radius System) ===== */
:root {
  --radius-none: 0;
  --radius-sm: 0.125rem;  /* 2px */
  --radius-md: 0.25rem;   /* 4px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;
}

/* ===== 過渡動畫系統 (Transition System) ===== */
:root {
  /* === 持續時間 (Duration) === */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  
  /* === 緩動函數 (Easing Functions) === */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* === 常用過渡組合 === */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);
  --transition-colors: color var(--duration-normal) var(--ease-out),
                       background-color var(--duration-normal) var(--ease-out),
                       border-color var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
}

/* ===== Z-Index 系統 (Z-Index System) ===== */
:root {
  --z-index-hide: -1;
  --z-index-auto: auto;
  --z-index-base: 0;
  --z-index-docked: 10;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-banner: 1200;
  --z-index-overlay: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-skiplink: 1600;
  --z-index-toast: 1700;
  --z-index-tooltip: 1800;
}

/* ===== 斷點系統 (Breakpoint System) ===== */
:root {
  /* === 斷點變數 (用於 JavaScript) === */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* === 容器最大寬度 === */
  --container-xs: 100%;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
}

/* ===== 公用類別系統 (Utility Classes) ===== */

/* === 視覺隱藏 === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 焦點樣式 === */
.focus-visible:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* === 文字截斷 === */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* === 動畫偏好設定 === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 高對比度模式支援 === */
@media (prefers-contrast: high) {
  :root {
    --border-light: var(--neutral-600);
    --border-medium: var(--neutral-700);
    --text-tertiary: var(--neutral-800);
  }
}

/* === 暗色模式預留 === */
@media (prefers-color-scheme: dark) {
  :root {
    /* 暗色模式變數將在後續版本中實作 */
  }
}