/**
 * 翰華留學移民 - 新唐風設計系統
 * Design System Variables
 * 現代中式美學 + 專業教育品牌
 */

:root {
  /* ==========================================
     配色系統 - 優雅專業配色
     ========================================== */

  /* 主色 - 墨黑系列 (Ink Black) */
  --color-ink-900: #1a1a1a;        /* 濃墨 - 主要文字 */
  --color-ink-800: #2d2d2d;        /* 深墨 - 次要文字 */
  --color-ink-700: #404040;        /* 中墨 */
  --color-ink-600: #5a5a5a;        /* 淡墨 */
  --color-ink-500: #737373;        /* 灰墨 - 輔助文字 */

  /* 品牌色 - 深綠系列 (Deep Forest Green) */
  --color-forest-900: #1a2928;     /* 深森綠 */
  --color-forest-800: #253736;     /* 濃森綠 */
  --color-forest-700: #304948;     /* 標準森綠 - 主品牌色 */
  --color-forest-600: #3d5d5b;     /* 中森綠 */
  --color-forest-500: #4a716f;     /* 淡森綠 */
  --color-forest-100: #e8f0ef;     /* 淺綠底色 */

  /* 輔助色 - 深金系列 (Deep Gold) */
  --color-gold-900: #6b5010;       /* 深金 */
  --color-gold-800: #8b6914;       /* 濃金 - 輔助色主色 */
  --color-gold-700: #a07e1a;       /* 標準金 */
  --color-gold-600: #b69321;       /* 中金 */
  --color-gold-500: #cca828;       /* 淡金 */
  --color-gold-100: #faf6e8;       /* 淡金底色 */

  /* 功能色 - 朱紅系列 (Vermilion - CTA 用) */
  --color-vermilion-900: #8b0000;  /* 深硃紅 */
  --color-vermilion-800: #a01010;  /* 濃硃紅 */
  --color-vermilion-700: #c8102e;  /* 標準硃紅 - 功能色 */
  --color-vermilion-600: #d13449;  /* 中硃紅 */
  --color-vermilion-500: #dc5768;  /* 淡硃紅 */
  --color-vermilion-100: #fde8eb;  /* 粉紅底色 */

  /* 中性色 - 白色/淺灰綠系列 (Neutral Tones) */
  --color-white: #ffffff;          /* 純白 */
  --color-paper: #f8f9f7;          /* 淺灰綠 - 主背景 */
  --color-ivory: #ffffff;          /* 象牙白 - 卡片背景 */
  --color-stone-100: #f8f9fa;      /* 淺石灰 */
  --color-stone-200: #e8e9e7;      /* 石灰 */
  --color-stone-300: #d1d2d0;      /* 深石灰 */

  /* 狀態色 */
  --color-success: #52c41a;        /* 成功 - 翠綠 */
  --color-warning: #faad14;        /* 警告 - 橙黃 */
  --color-error: #c8102e;          /* 錯誤 - 朱紅 */
  --color-info: #304948;           /* 信息 - 深綠 */

  /* ==========================================
     語義化顏色命名
     ========================================== */
  --color-primary: var(--color-forest-700);      /* 品牌主色: #304948 深綠 */
  --color-primary-hover: var(--color-forest-800);
  --color-primary-light: var(--color-forest-100);

  --color-accent: var(--color-gold-800);         /* 輔助色: #8b6914 深金 */
  --color-accent-hover: var(--color-gold-900);
  --color-accent-light: var(--color-gold-100);

  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-700);
  --color-text-muted: var(--color-ink-500);
  --color-text-inverse: var(--color-ivory);

  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-stone-100);
  --color-bg-elevated: var(--color-ivory);

  --color-border-light: var(--color-stone-200);
  --color-border-medium: var(--color-stone-300);
  --color-border-dark: var(--color-ink-600);

  /* ==========================================
     字體系統 - 分層字體設計
     ========================================== */

  /* 字體家族 */
  --font-display: "Gloock", "Noto Serif TC", "Noto Serif SC", "Source Han Serif TC", "Source Han Serif SC", "思源宋體", "STSong", serif;  /* 標題專用 - Gloock */
  --font-primary: "Crimson Pro", "Noto Serif TC", "Noto Serif SC", "Source Han Serif TC", "Source Han Serif SC", "思源宋體", "STSong", serif;  /* 內文 - Crimson Pro (易讀) */
  --font-serif-cn: "Crimson Pro", "Noto Serif TC", "Noto Serif SC", "Source Han Serif TC", "Source Han Serif SC", "思源宋體", "STSong", serif;
  --font-sans-cn: "Crimson Pro", "Noto Serif TC", "Noto Serif SC", "Source Han Serif TC", "Source Han Serif SC", "思源宋體", "STSong", serif;

  /* 字體大小 - 模塊化比例 (1.250 Major Third) */
  --text-xs: 0.64rem;      /* 10.24px */
  --text-sm: 0.8rem;       /* 12.8px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.563rem;     /* 25px */
  --text-2xl: 1.953rem;    /* 31.25px */
  --text-3xl: 2.441rem;    /* 39px */
  --text-4xl: 3.052rem;    /* 48.8px */
  --text-5xl: 3.815rem;    /* 61px */
  --text-6xl: 4.768rem;    /* 76.3px */

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* 字重 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==========================================
     間距系統 - 8px 基準
     ========================================== */
  --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 */

  /* ==========================================
     圓角系統 - 柔和曲線
     ========================================== */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ==========================================
     陰影系統 - 層次感
     ========================================== */
  --shadow-xs: 0 1px 2px 0 rgba(26, 26, 26, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(26, 26, 26, 0.08);
  --shadow-base: 0 4px 6px -1px rgba(26, 26, 26, 0.1), 0 2px 4px -1px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 6px 12px -2px rgba(26, 26, 26, 0.12), 0 4px 6px -2px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 10px 20px -4px rgba(26, 26, 26, 0.15), 0 6px 10px -4px rgba(26, 26, 26, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(26, 26, 26, 0.18), 0 10px 10px -5px rgba(26, 26, 26, 0.12);
  --shadow-2xl: 0 25px 50px -12px rgba(26, 26, 26, 0.25);

  /* 中式邊框陰影 */
  --shadow-ink: 0 2px 8px 0 rgba(26, 26, 26, 0.15);
  --shadow-vermilion: 0 4px 12px 0 rgba(200, 16, 46, 0.2);
  --shadow-gold: 0 4px 12px 0 rgba(212, 175, 55, 0.25);

  /* ==========================================
     動畫系統
     ========================================== */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  --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-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================
     版面配置
     ========================================== */
  --container-xs: 640px;
  --container-sm: 768px;
  --container-md: 1024px;
  --container-lg: 1280px;
  --container-xl: 1440px;
  --container-2xl: 1600px;

  --gutter: var(--space-6);
  --section-spacing: var(--space-10);

  /* ==========================================
     斷點系統
     ========================================== */
  --bp-xs: 360px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ==========================================
     Z-index 層級
     ========================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==========================================
     裝飾元素
     ========================================== */
  --border-traditional: 2px solid var(--color-primary);
  --border-accent: 1px solid var(--color-accent);
  --border-subtle: 1px solid var(--color-stone-200);

  /* 漸變色 */
  --gradient-primary: linear-gradient(135deg, var(--color-forest-700) 0%, var(--color-forest-900) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-gold-800) 0%, var(--color-gold-900) 100%);
  --gradient-vermilion: linear-gradient(135deg, var(--color-vermilion-700) 0%, var(--color-vermilion-900) 100%);
  --gradient-ink: linear-gradient(135deg, var(--color-ink-700) 0%, var(--color-ink-900) 100%);
  --gradient-paper: linear-gradient(180deg, var(--color-ivory) 0%, var(--color-paper) 100%);
}