/* ============================================================
   dayou-brand.css — 大有運動品牌標準樣式 v1.0 (2026-07-19)
   來源：大有運動品牌識別系統手冊 202403_v1
   規則：本檔是唯一的樣式來源，只能整檔同步，不可局部亂改。
   ============================================================ */

:root {
  /* -- CIS 基本色 -- */
  --du-green: #60B630;          /* 品牌綠 Pantone 2287C：行動/強調 */
  --du-green-dark: #4E9427;     /* 品牌綠 hover */
  --du-green-soft: #F2F8EC;     /* 品牌綠 8% 淺底：hover 列、選中底 */
  --du-black: #3E3A39;          /* 品牌黑 Pantone 419C */

  /* -- 數位應用色（結構） -- */
  --du-teal: #1C766E;           /* 墨綠 600：header/側欄/主標/連結 */
  --du-teal-dark: #153934;      /* 墨綠 900 */
  --du-teal-soft: #E6F2F0;      /* 墨綠 8% 淺底 */

  /* -- 灰階 -- */
  --du-ink: #221E1F;            /* 主文字 */
  --du-ink-2: #676767;          /* 次要文字 */
  --du-ink-3: #8E8E8E;          /* 佔位/停用 */
  --du-line: #E3E3E3;           /* 邊框分隔線 */
  --du-bg: #F5F6F4;             /* 頁面底 */
  --du-surface: #FFFFFF;        /* 卡片 */

  /* -- 語意色 -- */
  --du-success: #3D8B22;
  --du-warning: #B45309;
  --du-danger:  #C63A3A;
  --du-info:    #2F6FA8;
  --du-success-soft: #EFF7EA;
  --du-warning-soft: #FDF3E7;
  --du-danger-soft:  #FBEDED;
  --du-info-soft:    #EDF4FA;

  /* -- 品類識別色（只用於品類標籤/banner） -- */
  --du-cat-fitness: #C0392B;
  --du-cat-swim:    #2E86C1;
  --du-cat-ski:     #7FA8C9;
  --du-cat-camp:    #4E7C3F;
  --du-cat-skate:   #5B6770;
  --du-cat-inline:  #D9A404;

  /* -- 圖表系列色（驗證通過，固定順序） -- */
  --du-chart-1: #088E76;
  --du-chart-2: #D95D1C;
  --du-chart-3: #3B7FC4;
  --du-chart-4: #5E9427;
  --du-chart-5: #A8489E;
  --du-chart-6: #B58317;

  /* -- 字體 -- */
  --du-font: "Helvetica Neue", Helvetica, Arial, "Noto Sans TC",
             "PingFang TC", "Microsoft JhengHei", sans-serif;
  --du-fs-xs: 12px;  --du-fs-sm: 14px;  --du-fs-md: 16px;
  --du-fs-lg: 20px;  --du-fs-xl: 24px;  --du-fs-hero: 32px;

  /* -- 圓角/陰影/間距 -- */
  --du-r-sm: 8px;  --du-r-md: 12px;  --du-r-lg: 16px;
  --du-shadow-sm: 0 1px 3px rgba(34,30,31,.08), 0 1px 2px rgba(34,30,31,.06);
  --du-shadow-lg: 0 10px 30px rgba(34,30,31,.16);
  --du-sp-1: 4px; --du-sp-2: 8px; --du-sp-3: 12px; --du-sp-4: 16px;
  --du-sp-5: 24px; --du-sp-6: 32px; --du-sp-7: 48px;
}

/* 深色模式：整組換 token，元件不用改 */
[data-theme="dark"] {
  --du-green: #6FC13F;
  --du-green-dark: #60B630;
  --du-green-soft: rgba(96,182,48,.12);
  --du-teal: #2E9C8F;
  --du-teal-dark: #1C766E;
  --du-teal-soft: rgba(28,118,110,.18);
  --du-ink: #F2F1EF;
  --du-ink-2: #B8B5B3;
  --du-ink-3: #8E8E8E;
  --du-line: #3E3A39;
  --du-bg: #221E1F;
  --du-surface: #2B2726;
  --du-success: #5FB53A;
  --du-warning: #DB8F33;
  --du-danger:  #E06060;
  --du-info:    #5B9BD5;
  --du-success-soft: rgba(61,139,34,.16);
  --du-warning-soft: rgba(180,83,9,.16);
  --du-danger-soft:  rgba(198,58,58,.16);
  --du-info-soft:    rgba(47,111,168,.16);
  --du-chart-1: #1FA083;
  --du-chart-2: #E06A32;
  --du-chart-3: #4E8FCB;
  --du-chart-4: #6FA53A;
  --du-chart-5: #B55FAD;
  --du-chart-6: #BC8B24;
  --du-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --du-shadow-lg: 0 10px 30px rgba(0,0,0,.5);
}

/* ---------- 基礎 ---------- */
* { box-sizing: border-box; }
body.du {
  margin: 0;
  font-family: var(--du-font);
  font-size: var(--du-fs-sm);
  line-height: 1.6;
  color: var(--du-ink);
  background: var(--du-bg);
  -webkit-font-smoothing: antialiased;
}
.du h1, .du h2, .du h3 { line-height: 1.3; margin: 0 0 var(--du-sp-4); }
.du h1 { font-size: var(--du-fs-xl); font-weight: 700; letter-spacing: .05em; }
.du h2 { font-size: var(--du-fs-lg); font-weight: 700; }
.du h3 { font-size: var(--du-fs-md); font-weight: 700; }
.du a { color: var(--du-teal); text-decoration: none; }
.du a:hover { text-decoration: underline; }
.du-num { font-variant-numeric: tabular-nums; }

/* 品牌標題對（中文粗體＋英文全大寫小字） */
.du-title-pair .zh { font-size: var(--du-fs-xl); font-weight: 700; letter-spacing: .06em; color: var(--du-ink); }
.du-title-pair .en { font-size: var(--du-fs-xs); font-weight: 500; letter-spacing: .12em;
                     text-transform: uppercase; color: var(--du-ink-3); margin-top: 2px; }

/* ---------- 頁首 ---------- */
.du-header {
  display: flex; align-items: center; gap: var(--du-sp-4);
  height: 56px; padding: 0 var(--du-sp-5);
  background: var(--du-teal); color: #fff;
}
.du-header .brand { font-size: var(--du-fs-md); font-weight: 700; letter-spacing: .08em; color: #fff; }
.du-header .spacer { flex: 1; }
.du-header a { color: rgba(255,255,255,.85); }

/* ---------- 按鈕 ---------- */
.du-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 var(--du-sp-4);
  border-radius: var(--du-r-sm); border: 1px solid transparent;
  font: 500 var(--du-fs-sm)/1 var(--du-font);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.du-btn:disabled { opacity: .45; cursor: not-allowed; }
.du-btn-primary { background: var(--du-green); color: #fff; }
.du-btn-primary:hover:not(:disabled) { background: var(--du-green-dark); }
.du-btn-secondary { background: var(--du-surface); color: var(--du-teal); border-color: var(--du-teal); }
.du-btn-secondary:hover:not(:disabled) { background: var(--du-teal-soft); }
.du-btn-ghost { background: transparent; color: var(--du-teal); }
.du-btn-ghost:hover:not(:disabled) { background: var(--du-teal-soft); }
.du-btn-danger { background: var(--du-danger); color: #fff; }
.du-btn-danger:hover:not(:disabled) { filter: brightness(.9); }

/* ---------- 膠囊標籤 ---------- */
.du-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--du-fs-xs); font-weight: 500;
  background: var(--du-teal-soft); color: var(--du-teal);
}
.du-pill.green { background: var(--du-green-soft); color: var(--du-green-dark); }
.du-pill.success { background: var(--du-success-soft); color: var(--du-success); }
.du-pill.warning { background: var(--du-warning-soft); color: var(--du-warning); }
.du-pill.danger  { background: var(--du-danger-soft);  color: var(--du-danger); }
.du-pill.info    { background: var(--du-info-soft);    color: var(--du-info); }

/* ---------- 卡片 ---------- */
.du-card {
  background: var(--du-surface); border-radius: var(--du-r-md);
  box-shadow: var(--du-shadow-sm); padding: var(--du-sp-5);
}
.du-card.hoverable { transition: transform .15s, box-shadow .15s; }
.du-card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--du-shadow-lg); }

/* 數字看板卡 */
.du-stat .value { font-size: var(--du-fs-hero); font-weight: 700; color: var(--du-teal); }
.du-stat .label { font-size: var(--du-fs-sm); color: var(--du-ink-2); margin-top: 2px; }
.du-stat .delta-up { color: var(--du-success); font-size: var(--du-fs-xs); }
.du-stat .delta-down { color: var(--du-danger); font-size: var(--du-fs-xs); }

/* ---------- 表單 ---------- */
.du-field { margin-bottom: var(--du-sp-4); }
.du-field label { display: block; font-weight: 500; margin-bottom: 6px; }
.du-field label .req { color: var(--du-green-dark); margin-left: 2px; }
.du-input, .du-select, .du-textarea {
  width: 100%; height: 40px; padding: 0 var(--du-sp-3);
  border: 1px solid var(--du-line); border-radius: var(--du-r-md);
  background: var(--du-surface); color: var(--du-ink);
  font: 400 var(--du-fs-sm)/1.4 var(--du-font);
}
.du-textarea { height: auto; padding: var(--du-sp-3); }
.du-input:focus, .du-select:focus, .du-textarea:focus {
  outline: none; border-color: var(--du-teal);
  box-shadow: 0 0 0 3px var(--du-teal-soft);
}
.du-input.error { border-color: var(--du-danger); }
.du-field .hint { font-size: var(--du-fs-xs); color: var(--du-ink-3); margin-top: 4px; }
.du-field .error-msg { font-size: var(--du-fs-xs); color: var(--du-danger); margin-top: 4px; }

/* ---------- 表格 ---------- */
.du-table-wrap { overflow-x: auto; background: var(--du-surface);
                 border-radius: var(--du-r-md); box-shadow: var(--du-shadow-sm); }
.du-table { width: 100%; border-collapse: collapse; font-size: var(--du-fs-sm); }
.du-table th {
  text-align: left; padding: var(--du-sp-3) var(--du-sp-4);
  background: var(--du-bg); color: var(--du-teal);
  font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--du-line);
}
.du-table td { padding: var(--du-sp-3) var(--du-sp-4); border-bottom: 1px solid var(--du-line); }
.du-table tbody tr:hover { background: var(--du-green-soft); }
.du-table td.num, .du-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.du-table-meta { font-size: var(--du-fs-xs); color: var(--du-ink-2); padding: var(--du-sp-3) var(--du-sp-4); }

/* ---------- 提示訊息 ---------- */
.du-alert {
  display: flex; gap: var(--du-sp-3); align-items: flex-start;
  padding: var(--du-sp-3) var(--du-sp-4);
  border-radius: var(--du-r-md); border-left: 4px solid;
  font-size: var(--du-fs-sm);
}
.du-alert.success { background: var(--du-success-soft); border-color: var(--du-success); }
.du-alert.warning { background: var(--du-warning-soft); border-color: var(--du-warning); }
.du-alert.danger  { background: var(--du-danger-soft);  border-color: var(--du-danger); }
.du-alert.info    { background: var(--du-info-soft);    border-color: var(--du-info); }

/* ---------- Modal ---------- */
.du-modal-mask {
  position: fixed; inset: 0; background: rgba(34,30,31,.5);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.du-modal {
  background: var(--du-surface); border-radius: var(--du-r-lg);
  box-shadow: var(--du-shadow-lg); width: min(560px, calc(100vw - 32px));
  max-height: 85vh; overflow: auto; padding: var(--du-sp-5);
}

/* ---------- 空狀態 ---------- */
.du-empty {
  text-align: center; padding: var(--du-sp-7) var(--du-sp-5);
  color: var(--du-ink-2);
}
.du-empty .mascot { height: 96px; margin-bottom: var(--du-sp-4); } /* 吉祥物預留位 */
.du-empty .msg { font-size: var(--du-fs-md); margin-bottom: var(--du-sp-4); }

/* ---------- 中控入口卡 ---------- */
.du-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--du-sp-4);
}
.du-hub-card {
  display: flex; flex-direction: column; gap: var(--du-sp-2);
  background: var(--du-surface); border-radius: var(--du-r-md);
  box-shadow: var(--du-shadow-sm); padding: var(--du-sp-5);
  color: inherit; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.du-hub-card:hover { transform: translateY(-2px); box-shadow: var(--du-shadow-lg); text-decoration: none; }
.du-hub-card .icon { height: 48px; width: 48px; }
.du-hub-card .name { font-weight: 700; color: var(--du-ink); }
.du-hub-card .desc { font-size: var(--du-fs-xs); color: var(--du-ink-2); }