/* ============================================================
 * REUN Design Tokens v01
 *
 * doc_id:        design:tokens:20260506:reun-design-tokens:v01
 * doc_type:      spec
 * domain:        design
 * sub:           tokens
 * sensitivity:   internal
 * lifecycle:     active
 * audience:      [內部, 原廠, 經銷商, 消費者]
 * source_event_at: 2026-05-06
 * created_at:    2026-05-06
 * authors:       [paul, claude]
 * language:      zh-TW
 * extends:       governance:foundation:20260502:reun-unified-standard:v01
 *
 * 用途:REUN 視覺識別的單一 SoT,跨產品一致
 *   ✓ 儀表板         openclaw.reun.com.tw/cockpit/  (內部 admin)
 *   ✓ LIFF 經銷商庫存 LINE Mini App                  (對外經銷商)
 *   ✓ LIFF 報修       LINE Mini App                  (對外消費者)
 *   ✓ LIFF 註冊       LINE Mini App                  (對外經銷商)
 *   - reun.com.tw    WordPress 前台                  (對外消費者,逐步切換)
 *   - 客服 bot / 員工 bot UI                          (規劃中)
 *
 * 風格 DNA:Apple HIG × Claude 奶油暖色 × Linear/Stripe 後台密度
 * 風格起源:儀表板 v0.4(2026-05-05 Paul 拍板)
 *
 * 用法:
 *   <link rel="stylesheet" href="https://design.reun.com.tw/tokens/v01.css">
 *   或 inline copy 進 mockup <style> 區段
 *   引用 var(--reun-tint) / var(--brand-hollyland-fg) 等取代 hex 硬編
 *
 * 變更原則:
 *   ✓ 加新 token        直接加(不破既有)
 *   ✗ 改既有 token 值    走退役 4 步(統一規範 Part 11.3)+ tokens v02
 *   ✗ 刪 token          走退役 4 步,留 alias 6 個月
 * ============================================================ */

:root {
  /* ============================================================
   * Surface · 背景與卡片
   * ============================================================ */
  --reun-bg:        #FAF9F4;   /* 主背景:Claude 奶油 */
  --reun-surface:   #FFFFFF;   /* 卡片白 */
  --reun-surface-2: #F4F2EA;   /* 次表面:暖米(hover · 區塊背景)*/

  /* ============================================================
   * Border · 邊框與分隔
   * ============================================================ */
  --reun-border:         hsl(40 14% 86%);   /* hairline 1px */
  --reun-border-strong:  hsl(40 12% 78%);   /* 強分隔 */

  /* ============================================================
   * Text · 文字色
   * ============================================================ */
  --reun-text:    #1F1D1A;   /* 主文 · 暖深炭 */
  --reun-text-2:  #4E4942;   /* 次文 · 暖中灰 */
  --reun-muted:   #8C8478;   /* 弱文 · 暖 muted */

  /* ============================================================
   * Tint · 主互動色(連結 / active / 主 CTA)
   * ============================================================ */
  --reun-tint:       #007AFF;                /* iOS Blue */
  --reun-tint-soft:  rgba(0, 122, 255, 0.08);
  --reun-tint-ring:  rgba(0, 122, 255, 0.18);

  /* ============================================================
   * Status · 狀態色(三色 + 16% soft ring)
   * ============================================================ */
  --reun-ok:         #34C759;
  --reun-ok-soft:    rgba(52, 199, 89, 0.12);
  --reun-warn:       #FF9500;
  --reun-warn-soft:  rgba(255, 149, 0, 0.12);
  --reun-err:        #FF3B30;
  --reun-err-soft:   rgba(255, 59, 48, 0.12);

  /* ============================================================
   * Accent · 輔助強調色(用於圖表 / 多線疊加)
   * ============================================================ */
  --reun-purple:       #AF52DE;
  --reun-purple-soft:  rgba(175, 82, 222, 0.12);
  --reun-teal:         #5AC8FA;
  --reun-teal-soft:    rgba(90, 200, 250, 0.12);
  --reun-pink:         #FF2D55;
  --reun-pink-soft:    rgba(255, 45, 85, 0.12);
  --reun-indigo:       #5856D6;
  --reun-indigo-soft:  rgba(88, 86, 214, 0.12);

  /* ============================================================
   * Brand colors · 8 大代理品牌(顯示 SKU / 經銷商持有品牌時)
   *
   * 對齊 LIFF mockup 已定 6 色 +(2026-05-06 補 3 個漏的)
   * THYPOCH 退役待清,留 token 不刪
   * ============================================================ */
  --brand-hollyland-bg:  #FFE6E6;  --brand-hollyland-fg:  #C53030;   /* 紅      無線傳輸 */
  --brand-nanlite-bg:    #E6F0FF;  --brand-nanlite-fg:    #2B6CB0;   /* 藍      燈光 */
  --brand-deity-bg:      #E6F4EA;  --brand-deity-fg:      #276749;   /* 綠      收音 */
  --brand-tilta-bg:      #FFF4E6;  --brand-tilta-fg:      #C05621;   /* 橘      攝影配件 */
  --brand-dzofilm-bg:    #F3E6FF;  --brand-dzofilm-fg:    #6B46C1;   /* 紫      電影鏡頭 */
  --brand-thypoch-bg:    #FCE4EC;  --brand-thypoch-fg:    #B83280;   /* 粉      (退役) */
  /* 新補(2026-05-06)*/
  --brand-angelbird-bg:  #FFEEE6;  --brand-angelbird-fg:  #9C4221;   /* 焦糖橘  儲存 */
  --brand-gutek-bg:      #E6F8F4;  --brand-gutek-fg:      #1F7A6E;   /* 青綠    收音 */
  --brand-nanlux-bg:     #FFF8E1;  --brand-nanlux-fg:     #8B6914;   /* 金土黃  燈光高階 */

  /* ============================================================
   * Section tag · 儀表板 6 區彩標(對齊 admin-ia-spec Part 3)
   * ============================================================ */
  --tag-dms-bg: #DBEAFE;  --tag-dms-fg: #1E40AF;   /* DMS 經銷商 */
  --tag-crm-bg: #FCE7F3;  --tag-crm-fg: #9F1239;   /* CRM 客戶服務 */
  --tag-mi-bg:  #FEF3C7;  --tag-mi-fg:  #92400E;   /* MI 市場情報 */
  --tag-erp-bg: #D1FAE5;  --tag-erp-fg: #065F46;   /* ERP 進銷存 */
  --tag-kb-bg:  #EDE9FE;  --tag-kb-fg:  #5B21B6;   /* KB 知識庫 */
  --tag-ins-bg: #F1F5F9;  --tag-ins-fg: #334155;   /* Insights 跨域 */

  /* ============================================================
   * Typography · 字體 stack
   * ============================================================ */
  --reun-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
                     "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --reun-font-mono:  "SF Mono", ui-monospace, "Fira Code", "Source Code Pro", monospace;

  /* ============================================================
   * Spacing · 8 grid
   * ============================================================ */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ============================================================
   * Radius · 圓角
   * ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ============================================================
   * Shadow · 陰影
   * ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.05);
  --shadow-lg: -8px 0 32px rgba(0,0,0,0.08);  /* drawer 用 */

  /* ============================================================
   * Animation · 動效曲線
   * ============================================================ */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* ============================================================
   * Layout · 通用尺寸
   * ============================================================ */
  --sidebar-width:    240px;
  --content-max:      1240px;
  --drawer-width:     480px;
}

/* ============================================================
 * Dark mode · 跟隨 OS prefers-color-scheme
 * ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --reun-bg:        #000000;
    --reun-surface:   #1C1C1E;
    --reun-surface-2: #2C2C2E;
    --reun-border:        hsl(0 0% 18%);
    --reun-border-strong: hsl(0 0% 26%);
    --reun-text:    #F5F5F7;
    --reun-text-2:  #C7C7CC;
    --reun-muted:   #8E8E93;
    --reun-tint:       #0A84FF;
    --reun-tint-soft:  rgba(10, 132, 255, 0.14);
    --reun-tint-ring:  rgba(10, 132, 255, 0.24);
    --reun-ok:         #30D158;
    --reun-ok-soft:    rgba(48, 209, 88, 0.18);
    --reun-warn:       #FF9F0A;
    --reun-warn-soft:  rgba(255, 159, 10, 0.18);
    --reun-err:        #FF453A;
    --reun-err-soft:   rgba(255, 69, 58, 0.18);
    --reun-purple:       #BF5AF2;
    --reun-purple-soft:  rgba(191, 90, 242, 0.18);
    --reun-teal:         #64D2FF;
    --reun-teal-soft:    rgba(100, 210, 255, 0.18);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.06);
    /* 品牌色票深色模式微調(背景轉低飽和)*/
    --brand-hollyland-bg: rgba(197, 48, 48, 0.14);
    --brand-nanlite-bg:   rgba(43, 108, 176, 0.16);
    --brand-deity-bg:     rgba(39, 103, 73, 0.16);
    --brand-tilta-bg:     rgba(192, 86, 33, 0.14);
    --brand-dzofilm-bg:   rgba(107, 70, 193, 0.16);
    --brand-thypoch-bg:   rgba(184, 50, 128, 0.14);
    --brand-angelbird-bg: rgba(156, 66, 33, 0.14);
    --brand-gutek-bg:     rgba(31, 122, 110, 0.16);
    --brand-nanlux-bg:    rgba(139, 105, 20, 0.16);
  }
}

/* ============================================================
 * 平台變體 · LIFF (LINE Mini App)
 *
 * LIFF 在 LINE 內,但統一風格優先 — 不再用 LINE green CTA,
 * 改用 REUN tint(iOS Blue),讓用戶感覺「跟主站是同一套」
 * 保留:mobile touch target 大尺寸
 * ============================================================ */
.reun-liff {
  --reun-cta-primary:    var(--reun-tint);
  --reun-cta-primary-fg: #FFFFFF;
  --reun-input-height:   44px;        /* mobile touch */
  --reun-cta-height:     48px;        /* sticky bottom CTA */
  --reun-card-padding:   16px;        /* mobile 較窄,padding 適中 */
}

/* ============================================================
 * 平台變體 · Dashboard (內部 admin)
 *
 * Desktop 為主,密度較高
 * ============================================================ */
.reun-dashboard {
  --reun-cta-primary:    var(--reun-tint);
  --reun-cta-primary-fg: #FFFFFF;
  --reun-input-height:   36px;
  --reun-cta-height:     38px;
  --reun-card-padding:   20px;
}

/* ============================================================
 * 範例:常用 utility class · 直接 cascade 進產品(可選)
 * 不強制使用,可繼續寫自家 component class 引 var()
 * ============================================================ */
.reun-card {
  background: var(--reun-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.reun-button-primary {
  background: var(--reun-tint);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--reun-font-stack);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.reun-button-primary:hover { opacity: 0.9; }

.reun-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reun-status-dot.ok   { background: var(--reun-ok);   box-shadow: 0 0 0 3px var(--reun-ok-soft); }
.reun-status-dot.warn { background: var(--reun-warn); box-shadow: 0 0 0 3px var(--reun-warn-soft); }
.reun-status-dot.err  { background: var(--reun-err);  box-shadow: 0 0 0 3px var(--reun-err-soft); }