/* ========================================
   電子書閱讀器選購測驗 - Design System v1.6
   Hello Ruru / tools.helloruru.com
   Font: GenSenRounded (源泉圓體)
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* 源泉圓體 GenSenRounded TW（OFL 商用免費） */
@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GenSenRounded';
  src: url('https://lab.helloruru.com/fonts/GenSenRounded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 色彩系統 - Design System v1.5 */
  --color-primary: #D4A5A5;          /* Rose 主色 */
  --color-secondary: #B8A9C9;        /* Lavender 次色 */
  --color-primary-light: #E8CBCB;    /* 撫子粉 */
  --color-primary-dark: #C9929A;     /* 灰玫瑰 */
  --color-secondary-light: #C4B7D7;  /* 藤紫 */
  --color-secondary-dark: #9B7E93;   /* 藕荷 */
  --color-bg: #FAFAFA;               /* 淺背景 */
  --color-surface: #FFFFFF;          /* 卡片 */
  --color-text: #333333;             /* 墨色 - 標題文字 */
  --color-text-light: #4A4A4A;       /* 炭灰 - 內文文字 */
  --color-text-muted: #888888;       /* 灰石 - 說明文字 */
  --color-text-placeholder: #AAAAAA; /* 淺灰 - 註解/placeholder */
  --color-border: #E8E4E1;           /* 霧灰 */
  --color-success: #A8B5A0;          /* 鼠尾草綠 */
  --color-warning: #DEB887;
  /* 圓角系統 - Design System v1.4 */
  --radius-lg: 24px;                 /* 按鈕、卡片 */
  --radius: 24px;                    /* 按鈕、卡片（alias） */
  --radius-md: 12px;                 /* 輸入框 */
  --radius-sm: 8px;                  /* 標籤、Badge */
  /* 字體系統 - Design System v1.6 */
  --font-heading: 'GenSenRounded', 'Noto Sans TC', sans-serif;  /* H1, H2 - 源泉圓體 Bold */
  --font-body: 'GenSenRounded', 'Noto Sans TC', sans-serif;     /* H3, p - 源泉圓體 Medium */
  --font-small: 'Noto Sans TC', sans-serif;                         /* ≤12px 小字 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --shadow-sm: 0 2px 8px rgba(212, 165, 165, 0.1);
  --shadow-md: 0 4px 16px rgba(212, 165, 165, 0.15);
  --shadow-lg: 0 8px 32px rgba(212, 165, 165, 0.2);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 500;  /* v1.5: 內文改用 Medium */
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Global link reset */
a { color: var(--color-primary-dark); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }
a:visited { color: var(--color-primary-dark); }