/**
 * variables.css — Design Tokens
 * Phase 2（2026-09-09）：Renaissance Fox Cottage redesign
 * 沿用 Phase 0/1 建立的 alias 策略——不刪除現有 token 名稱、不改變既有
 * 消費端（globals.css / 各頁面內嵌 style）的引用方式，只把語義化 alias
 * 背後指向的實際色值換成 CLAUDE_PWA_RENAISSANCE_REDESIGN_SPEC.md 的
 * 溫暖鄉村色票。新增 --color-parchment/terracotta/sage/burgundy/
 * dusty-blue/gold 這組規格原生命名，語義 token 全部改成 alias 指向它們。
 */

:root {
  /* ============================================================
   * Renaissance 色票（規格原生命名，唯一的實際色值來源）
   * ============================================================ */
  --color-parchment: #F3E8D0;
  --color-cream: #FAF6EC;
  --color-paper: #FFFDF7;

  --color-terracotta: #B86B32;
  --color-terracotta-dark: #965326;

  --color-sage: #66704B;
  --color-sage-light: #DCE0C9;

  --color-burgundy: #7D4038;
  --color-burgundy-light: #E7D1C8;

  --color-dusty-blue: #667D82;
  --color-dusty-blue-light: #D8E1E0;

  --color-renaissance-gold: #B89455;
  --color-renaissance-gold-light: #E5D3A9;

  --color-ink: #29251F;
  /* 原本 #756E63 在羊皮紙背景上只有 4.1:1，實測沒過 WCAG AA 的 4.5:1，
     加深一階 */
  --color-muted-ink: #665F55;

  --color-warm-border: #DDD1BB;
  --color-warm-border-soft: #EAE1D1;

  /* ============================================================
   * COLOR — Base Surfaces (3-layer system)
   * 保留現有 bg/text/border tokens 名稱，值改指向 Renaissance 色票
   * ============================================================ */

  /* --- 原有 tokens（名稱保留，現有 globals.css 大量引用）--- */
  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-parchment);
  --bg-tertiary: var(--color-cream);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-muted-ink);
  /* 原本 #A69C8A 在羊皮紙/紙面背景上只有 2.2~2.7:1，離 WCAG AA 差很遠，
     這個 token 到處被當一般文字（時間戳、次要說明）用，不能只是裝飾性的
     淡灰。第一次加深到 #7A7266 還是差一點（3.9:1），再加深一階 */
  --text-muted: #6E6759;

  --border-color: var(--color-warm-border);

  /* --- Surface System (語義化 alias) --- */
  --surface-0: var(--color-paper);      /* 卡片、面板、彈窗——最亮的紙面 */
  --surface-1: var(--color-parchment);  /* 頁面底色——羊皮紙 */
  --surface-2: var(--color-cream);      /* hover/active、次層卡片 */
  --surface-3: #E3D9C3;                 /* disabled、更深一層的暖灰 */

  /* --- Text Hierarchy (語義化 alias) --- */
  --text-inverse: var(--color-paper);

  /* --- Border Hierarchy --- */
  --border-subtle: var(--color-warm-border-soft);
  --border-default: var(--border-color);
  --border-strong: #C4B49A;

  /* ============================================================
   * COLOR — Semantic Colors
   * 保留現有 primary/secondary/success/info/warning/danger 名稱，
   * 值全部改指向 Renaissance 色票（見上）。
   * ============================================================ */

  /* --- 原有 tokens（名稱保留，逐步淘汰中，值一併換成暖色）--- */
  --primary-color: var(--color-terracotta);
  --secondary-color: var(--color-sage);
  --success-color: var(--color-sage);
  --info-color: var(--color-dusty-blue);
  --warning-color: var(--color-renaissance-gold);
  --danger-color: var(--color-burgundy);

  /* --- Warm Palette (語義化 alias，globals.css / 各頁面主要消費這組) --- */
  --color-primary: var(--color-terracotta);         /* CTA、active state、Chat、儲存/確認 */
  --color-primary-hover: var(--color-terracotta-dark);
  --color-primary-light: #F1DFC9;

  --color-secondary: var(--color-sage);             /* Memory、Feed、自然/陪伴類功能 */
  --color-secondary-hover: #545C3D;

  --color-success: var(--color-sage);
  --color-success-light: var(--color-sage-light);

  --color-warning: var(--color-renaissance-gold);   /* 僅供 icon accent/divider/選中指示，不大面積使用 */
  --color-warning-light: var(--color-renaissance-gold-light);

  --color-danger: var(--color-burgundy);            /* Heart、favorite、重要通知 */
  --color-danger-light: var(--color-burgundy-light);

  --color-info: var(--color-dusty-blue);            /* Diary、Library、歷史/資訊類 */
  --color-info-light: var(--color-dusty-blue-light);

  /* ============================================================
   * SPACING
   * 保留現有 spacing tokens，新增語義化 alias
   * ============================================================ */

  /* --- 原有 tokens (保留) --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ============================================================
   * BORDER RADIUS
   * 保留現有 --border-radius，新增 scale
   * ============================================================ */

  /* --- 原有 token (保留) --- */
  --border-radius: 8px;

  /* --- 新增：Radius Scale --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: var(--border-radius);   /* alias */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ============================================================
   * SHADOWS
   * 保留現有 shadow tokens，新增 warm shadow 值
   * ============================================================ */

  /* --- 原有 tokens（名稱保留，值換成規格指定的暖棕色柔光陰影，
       不用純黑——rgba(70,52,32,...) 是規格「Shadow」段落給的暖褐色）--- */
  --shadow-sm: 0 2px 8px rgba(70,52,32,0.06);
  --shadow-md: 0 8px 30px rgba(70,52,32,0.08);
  --shadow-lg: 0 16px 48px rgba(70,52,32,0.12);

  /* --- 新增：Warm Shadow System --- */
  --shadow-xs: 0 1px 2px rgba(70,52,32,0.05);
  --shadow-sheet: 0 -4px 24px rgba(70,52,32,0.1);

  /* --- 新增：主色調陰影，讓主要按鈕/CTA 有立體浮起感 --- */
  --shadow-primary: 0 4px 14px rgba(184,107,50,0.32);
  --shadow-primary-hover: 0 6px 20px rgba(184,107,50,0.42);

  /* ============================================================
   * TYPOGRAPHY
   * 保留現有 --font-family，新增 font stacks 與 fluid type scale
   * ============================================================ */

  /* --- 原有 token（名稱保留；PingFang TC/Microsoft JhengHei 是使用者實際
       裝置——Mac/iPhone/Windows——內建的繁中無襯線字型，先吃到就不用再拉
       Noto Sans TC 網路字型，省一組離線 PWA 不需要的下載）--- */
  --font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC',
    'Microsoft JhengHei', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* --- Font Stacks（規格 3. Typography：serif heading／sans body）--- */
  --font-display: 'Newsreader', 'Noto Serif TC', 'Source Han Serif TC', 'PingFang TC', Georgia, serif;
  --font-ui: var(--font-family);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-cjk: 'Noto Serif TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  /* --- 新增：Fluid Type Scale (clamp) --- */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem);      /* 11-12px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);     /* 13-14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1rem);         /* 15-16px */
  --text-lg: clamp(1.0625rem, 1.0rem + 0.31vw, 1.125rem);      /* 17-18px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);          /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);               /* 24-32px */
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);             /* 32-56px */

  /* --- 新增：Font Weights --- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- 新增：Line Heights --- */
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ============================================================
   * TRANSITIONS
   * 保留現有 --transition-speed，新增 easing 與 duration scale
   * ============================================================ */

  /* --- 原有 token (保留) --- */
  --transition-speed: 0.2s;

  /* --- 新增：Duration & Easing Scale --- */
  --duration-fast: 120ms;
  --duration-normal: var(--transition-speed);   /* alias 200ms */
  --duration-slow: 300ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
   * LAYOUT CONSTANTS
   * ============================================================ */

  /* --- 原有 chat-specific (保留) --- */
  --chat-max-width: 800px;
  --message-max-width: 70%;

  /* --- 新增 --- */
  --header-height: 56px;
  --composer-height: auto;
  --sidebar-width: 280px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);

  /* ============================================================
   * Z-INDEX SCALE
   * ============================================================ */

  --z-base: 0;
  --z-dropdown: 50;
  --z-drawer: 100;
  --z-sheet: 200;
  --z-toast: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* ============================================================
   * BREAKPOINTS
   * ============================================================ */

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

/* ============================================================
 * DARK THEME — 真正實作 [data-theme="dark"]
 * 覆寫所有 color/surface tokens
 * ============================================================ */

[data-theme="dark"] {
  /* 「夜晚的小屋 + 燭光」，不是黑色科技 dashboard——規格第 14 節給的
     candlelit cottage 色票，取代原本偏碳黑的版本。 */
  --color-ink: #F0E4CE;
  --color-muted-ink: #B9AA91;

  /* Surfaces */
  --surface-0: #3D362D;         /* dark-paper：卡片/彈窗/對話泡泡 */
  --surface-1: #29251F;         /* dark-bg：主背景 */
  --surface-2: #342F27;         /* dark-surface：hover/elevated */
  --surface-3: #4A4032;         /* 再深一層：disabled、細分隔 */

  /* Text */
  --text-primary: #F0E4CE;      /* dark-text */
  --text-secondary: #D6C7A8;
  --text-muted: #B9AA91;        /* dark-muted */
  --text-inverse: #29251F;      /* 深色文字疊在亮色 accent 上 */

  /* Borders */
  --border-subtle: #4A4032;
  --border-default: #5A4D3C;    /* dark-border */
  --border-strong: #7A6A50;

  /* Semantic Colors (Dark variants) */
  --color-primary: #C9824A;         /* dark-accent */
  --color-primary-hover: #DDA06C;
  --color-primary-light: #4A3B2A;

  --color-secondary: #98A178;       /* 夜色裡調亮的 sage */
  --color-secondary-hover: #ADB58F;

  --color-success: #98A178;
  --color-success-light: #37402A;

  --color-warning: #B89455;         /* dark-gold，跟亮色一樣不變（金色在暗背景本來就顯眼）*/
  --color-warning-light: #4A3F2A;

  --color-danger: #C08477;          /* 夜色裡調亮的 burgundy */
  --color-danger-light: #4A342E;

  --color-info: #8FA6AB;            /* 夜色裡調亮的 dusty-blue */
  --color-info-light: #2E3C3E;

  /* Shadows（深色底改用純黑，暖色陰影在深色底反而看不出立體感） */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.38);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);
  --shadow-sheet: 0 -4px 24px rgba(0,0,0,0.4);
  --shadow-primary: 0 4px 14px rgba(201,130,74,0.35);
  --shadow-primary-hover: 0 6px 20px rgba(201,130,74,0.45);
}

/* ============================================================
 * LEGACY THEMES — 保留 UI 相容，對映到 Light Warm Palette
 * 避免破壞現有 settings.html 的 theme-option 選項
 * ============================================================ */

[data-theme="default"],
[data-theme="blue"],
[data-theme="rose"] {
  /* 統一對映到 Light Warm Palette (root 已定義) */
  /* 如需未來區分，可在此覆寫特定 tokens */
}

/* ============================================================
 * PRINT STYLES
 * ============================================================ */

@media print {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-sheet: none;
  }
}