/* root.css - 全站共用設計變數 + 小型共用元件
   請把 root.css 放在其它 css 之前載入（site/seller/admin 都一樣）：
   <link rel="stylesheet" href="~/css/root.css" asp-append-version="true" />
*/

:root{
  /* ===== Brand / Palette ===== */
  --primary-color: #4e909e;
  --secondary-color: #8F6D59;
  --brand: var(--primary-color);
  --brand-2: #4b627b;
  --accent: var(--secondary-color);
  --accent-dark: #7f2d2b;
  --bg: #f8eede;
  --bg-2: #e2d2b5;
  --surface: #ffffff;
  --surface-2: #e2d2b5;
  --surface-3: #e3ecf5;
  --text: #1f2937;
  --text-2: #374151;
  --muted: #6b7280;
  --muted-2: #94a3b8;
  --border: #e5e7eb;
  --border-soft: #e0e0e0;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --line-green: #06c755;
  --background-color: var(--bg-2);
  --header-text: var(--bg);
  --product-bg: var(--bg);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 10px 25px rgba(0,0,0,.12);
  --overlay: rgba(0,0,0,.53);
  --ring: 0 0 0 .25rem rgba(78,144,158,.22);
  --avatar-xs: 28px;
  --avatar-sm: 36px;
  --avatar-md: 44px;
  --avatar-lg: 56px;

  /* ===== AD module vars ===== */
  --ad-bg: var(--surface-2);
  --ad-border: var(--border);
  --ad-primary: var(--brand-2);
  --ad-primary-soft: var(--surface-3);
  --ad-text-main: var(--text);
  --ad-text-muted: var(--muted);

  /* ===== S module vars ===== */
  --s-bg: var(--background-color, var(--bg-2));
  --s-border: rgba(154,55,52,.18);
  --s-primary: var(--primary-color, var(--brand));
  --s-ring: var(--ring, rgba(78,144,158,.35));
  --s-secondary: var(--secondary-color, var(--accent));
  --s-shadow: 0 10px 28px rgba(15,23,42,.06);
  --s-surface: var(--product-bg, var(--bg));
  --s-text: var(--text-color, var(--accent));

  /* ===== SD module vars ===== */
  --sd-border: rgba(154,55,52,.18);
  --sd-border-soft: rgba(0,0,0,.08);
  --sd-muted: rgba(154,55,52,.65);
  --sd-primary: var(--primary-color, var(--brand));
  --sd-radius: var(--radius-lg);
  --sd-ring: var(--ring, rgba(78,144,158,.35));
  --sd-secondary: var(--secondary-color, var(--accent));
  --sd-shadow: 0 10px 28px rgba(15,23,42,.08);
  --sd-surface: var(--product-bg, var(--bg));
  --sd-text: var(--text-color, var(--text));

  /* ===== CK module vars ===== */
  --ck-border: rgba(0,0,0,.10);
  --ck-border-2: rgba(154,55,52,.16);
  --ck-header-text: var(--header-text, var(--surface));
  --ck-muted: rgba(154,55,52,.65);
  --ck-primary: var(--primary-color, var(--brand));
  --ck-radius: var(--radius-lg);
  --ck-ring: var(--ring, rgba(78,144,158,.35));
  --ck-secondary: var(--secondary-color, var(--accent));
  --ck-shadow: 0 10px 28px rgba(15,23,42,.08);
  --ck-surface: var(--product-bg, var(--bg));
  --ck-text: var(--text-color, var(--text));

  /* ===== JG module vars ===== */
  --jg-accent: var(--primary-color, var(--brand));
  --jg-accent-soft: rgba(78,144,158,.14);
  --jg-accent-softer: rgba(78,144,158,.07);
  --jg-avatar-ring: rgba(154,55,52,.22);
  --jg-bg: var(--background-color, var(--bg-2));
  --jg-border: rgba(0,0,0,.10);
  --jg-cream: var(--product-bg, var(--bg));
  --jg-ring: rgba(78,144,158,.22);
  --jg-surface: var(--product-bg, var(--bg));
  --jg-text-dark: var(--text);
  --jg-text-main: var(--text);
  --jg-warm: var(--secondary-color, var(--accent));

  /* ===== PD module vars ===== */
  --pd-accent: var(--secondary-color, #d0011b);
  --pd-border: rgba(154,55,52,.18);
  --pd-card-bg: var(--product-bg, var(--surface));
  --pd-muted: rgba(154,55,52,.70);
  --pd-muted-2: rgba(0,0,0,.35);
  --pd-primary: var(--primary-color, #0d6efd);
  --pd-soft: rgba(154,55,52,.06);
  --pd-soft2: rgba(78,144,158,.12);

  /* ===== Other vars (from existing css) ===== */
  --sr-border: rgba(154,55,52,.18);
  --sr-border-2: rgba(0,0,0,.08);
  --sr-header-text: var(--header-text, var(--surface));
  --sr-muted: rgba(154,55,52,.65);
  --sr-primary: var(--primary-color, var(--brand));
  --sr-ring: var(--ring, rgba(78,144,158,.35));
  --sr-secondary: var(--secondary-color, var(--accent));
  --sr-surface: var(--product-bg, var(--bg));
  --sr-text: var(--text-color, var(--text));
  --text-color: var(--accent);
}

/* 共用：避免頭像/縮圖被外部樣式放大 */
.avatar-img,
.seller-avatar,
.admin-avatar,
.topbar-avatar{
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* 共用卡片 */
.ui-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 共用：淡文字 */
.text-muted-2{ color: var(--muted-2); }