/**
 * 87x.uk 設計樣式變數
 * 嚴格遵照 Data(資料)/深淺顏色.md 規範定義
 * ☀️ 淺色模式 (Light Mode) / 🌙 深色模式 (Dark Mode)
 */

:root {
  /* 字體系統 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans TC", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 過渡與動態效果 */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* 圓角系統 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 容器寬度 */
  --container-max: 1120px;
  --header-height: 72px;

  /* 強調色 (輔助品牌色) */
  --accent-primary: #1A73E8;
  --accent-hover: #1557B0;
  --accent-subtle: rgba(26, 115, 232, 0.1);
  --success-color: #0F9D58;
  --warning-color: #F4B400;
  --danger-color: #D93025;
}

/* ☀️ 淺色模式 (Light Mode) - 嚴格依據深淺顏色.md */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --card-bg: #FFFFFF;
  --card-hover-bg: #F8F9FA;
  --text-primary: #202124;
  --text-secondary: #5F6368;
  --border-color: #DADCE0;

  --shadow-sm: 0 1px 3px rgba(32, 33, 36, 0.08);
  --shadow-md: 0 4px 14px rgba(32, 33, 36, 0.08);
  --shadow-lg: 0 10px 30px rgba(32, 33, 36, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.88);
}

/* 🌙 深色模式 (Dark Mode) - 嚴格依據深淺顏色.md */
:root[data-theme="dark"] {
  --bg-primary: #202124;
  --bg-secondary: #303134;
  --card-bg: #292A2D;
  --card-hover-bg: #303134;
  --text-primary: #E8EAED;
  --text-secondary: #BDC1C6;
  --border-color: #5F6368;

  --accent-primary: #8AB4F8;
  --accent-hover: #AECBFA;
  --accent-subtle: rgba(138, 180, 248, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(32, 33, 36, 0.88);
}