/* ==========================================================================
   Design Tokens — Single Source of Truth
   所有設計 Token 集中於此，4 個模板共用
   禁止在各模板重複定義 :root 變數
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Brand Colors
     ----------------------------------------------------------------------- */
  --color-primary: #165540;
  --color-primary-hover: #0F4530;
  --color-primary-subtle: #E8F0EC;
  --color-primary-text: #0B2F23;

  /* --------------------------------------------------------------------------
     Surface Colors
     ----------------------------------------------------------------------- */
  --color-bg-page: #FAFAF7;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F4F4F0;
  --color-bg-muted: #F2F1ED;

  /* --------------------------------------------------------------------------
     Text Colors
     ----------------------------------------------------------------------- */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-muted: #6E6E6E;        /* 白底對比 ~5.5:1 */
  --color-placeholder: #767676;       /* 新增：accessibility-audit.md 建議，對比 4.5:1 */

  /* --------------------------------------------------------------------------
     Border Colors
     ----------------------------------------------------------------------- */
  --color-border: #E4E2DC;
  --color-border-muted: #EEEBE4;
  --color-border-subtle: #F4F2EC;

  /* --------------------------------------------------------------------------
     Status Colors (semantic)
     ----------------------------------------------------------------------- */
  --color-success: #2E7D4F;
  --color-success-bg: #E0F1E7;
  --color-warning: #B8761A;
  --color-warning-bg: #FCEFD7;
  --color-danger: #C0392B;
  --color-danger-bg: #FBE3DF;
  --color-info: #2B6CB0;
  --color-info-bg: #DEEBF7;

  /* --------------------------------------------------------------------------
     Spacing Scale
     ----------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 60px;   /* landing 專用 */
  --space-16: 64px;   /* pricing/landing 專用 */
  --space-20: 80px;   /* pricing/landing 專用 */

  /* --------------------------------------------------------------------------
     Border Radius
     ----------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;  /* landing 專用 */
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Type Scale
     ----------------------------------------------------------------------- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;   /* 統一：原 index/login 26px → 28px */
  --text-4xl: 36px;   /* landing 專用 */

  /* --------------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20,20,20,0.04);
  --shadow-md: 0 2px 6px rgba(20,20,20,0.06);
  --shadow-lg: 0 8px 24px rgba(20,20,20,0.08);
  --shadow-xl: 0 16px 48px rgba(20,20,20,0.10);  /* landing 專用 */

  /* --------------------------------------------------------------------------
     Misc
     ----------------------------------------------------------------------- */
  --color-overlay: rgba(20,20,20,0.5);

  /* --------------------------------------------------------------------------
     Legacy Aliases (向後相容 — 僅供既有 JS 注入樣式引用，新代碼勿用)
     這些 alias 映射到上方 base token，確保不破壞現有功能
     ----------------------------------------------------------------------- */
  --color-canvas-subtle: var(--color-bg-muted);
  --color-canvas: var(--color-bg-card);
  --color-canvas-inset: var(--color-bg-muted);
  --color-fg-default: var(--color-text-primary);
  --color-fg-muted: var(--color-text-muted);
  --color-fg-subtle: var(--color-text-muted);
  --color-fg-on-emphasis: #FFFFFF;
  --color-accent-fg: var(--color-primary);
  --color-accent-subtle: var(--color-primary-subtle);
  --color-accent-muted: var(--color-primary-subtle);
  --color-success-fg: var(--color-success);
  --color-warning-fg: var(--color-warning);
  --color-danger-fg: var(--color-danger);
  --color-info-fg: var(--color-info);
}

/* 全域 placeholder — 4 模板共用 */
::placeholder { color: var(--color-placeholder); }

/* ==========================================================================
   Utility Classes — 供 JS 動態模板使用，替代 inline style
   ========================================================================== */
/* Icon sizing */
.icon-sm { font-size: var(--text-xl); }      /* 20px */
.icon-md { font-size: var(--text-2xl); }     /* 24px */
.icon-lg { font-size: var(--text-3xl); }     /* 28px */
.icon-xl { font-size: 35px; }                /* 35px (特殊大小) */
.icon-2xl { font-size: 27px; vertical-align: -3px; margin-right: var(--space-2); }  /* card-title icons */

/* Icon with vertical alignment & margin */
.icon-btn { font-size: var(--text-xl); vertical-align: -2px; margin-right: var(--space-2); }
.popup-icon { font-size: var(--text-xl); vertical-align: -2px; margin-right: var(--space-1); }
.icon-bell-lg { font-size: 35px; margin-right: var(--space-3); }
.modal-icon-warning { font-size: 35px; vertical-align: -5px; margin-right: var(--space-3); color: var(--color-warning); }
.modal-icon-primary { font-size: 35px; vertical-align: -5px; margin-right: var(--space-3); color: var(--color-primary); }
.modal-icon-danger { font-size: 35px; vertical-align: -5px; margin-right: var(--space-3); color: var(--color-danger); }
.alert-icon { font-size: var(--text-base); vertical-align: -2px; margin-right: var(--space-1); }
.stat-warning-icon { font-size: var(--text-base); vertical-align: -2px; margin-right: var(--space-1); }
.error-icon { font-size: var(--text-base); vertical-align: -2px; margin-right: var(--space-1); }
.toggle-btn { font-size: var(--text-lg); }  /* 16px for eye icons */
.tab-icon { font-size: var(--text-lg); vertical-align: -1px; margin-right: var(--space-1); }  /* 16px for superadmin tabs */
.settings-tab-icon { font-size: var(--text-xl); vertical-align: -2px; margin-right: var(--space-1); }  /* 20px for settings tabs */
.notif-type-icon { font-size: var(--text-xl); }  /* 20px for notification type icons */

/* Text utilities */
.text-xs { font-size: var(--text-xs); }      /* 12px */
.text-sm { font-size: var(--text-sm); }      /* 13px */
.text-base { font-size: var(--text-base); }  /* 14px */
.text-md { font-size: var(--text-md); }      /* 15px */
.text-lg { font-size: var(--text-lg); }      /* 16px */
.text-xl { font-size: var(--text-xl); }      /* 20px */

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-text-primary); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-success { color: var(--color-success); }

/* Spacing utilities */
.mt-1 { margin-top: var(--space-1); }  /* 4px */
.mt-2 { margin-top: var(--space-2); }  /* 8px */
.mt-3 { margin-top: var(--space-3); }  /* 12px */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }

/* Form hints */
.form-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.form-hint-sm { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Toast icon */
.toast-icon { font-size: var(--text-lg); flex-shrink: 0; }

/* Loading states */
.loading-text { color: var(--color-text-muted); }
.loading-state { color: var(--color-text-muted); text-align: center; padding: var(--space-10); }

/* Empty states */
.empty-state { color: var(--color-text-muted); text-align: center; padding: var(--space-10); }

/* Badge small */
.badge-sm { font-size: var(--text-xs); margin-left: var(--space-1); }

/* Plan card */
.plan-card.active { border-color: var(--color-primary); background: var(--color-bg-muted); }
.plan-desc { font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: var(--space-3); min-height: 40px; }

/* Search placeholder */
.search-placeholder { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Audit log */
.audit-meta { padding: var(--space-2); font-family: monospace; font-size: var(--text-xs); color: var(--color-text-muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.audit-cell { padding: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.diagnose-timestamp { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.diagnose-detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.diagnose-error { margin-top: var(--space-2); color: var(--color-text-muted); }
.pagination-info { color: var(--color-text-muted); font-size: var(--text-base); }
.audit-note { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-3); }

/* Subscriber info */
.subscriber-info { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-3); }
.subscriber-detail { font-size: var(--text-base); color: var(--color-text-muted); }

/* Chart */
.chart-label { font-size: var(--text-xs); color: var(--color-text-muted); writing-mode: vertical-rl; margin-top: var(--space-1); }
.chart-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.legend-color { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: var(--space-1); }
.legend-primary { background: var(--color-primary); }
.legend-danger { background: var(--color-danger); }
.legend-warning { background: var(--color-warning); }
.legend-success { background: var(--color-success); }
.legend-info { background: var(--color-info); }

/* Label hint */
.label-hint { color: var(--color-text-muted); font-weight: normal; }

/* Custom confirm/alert title */
.custom-confirm-box h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }

/* ==========================================================================
   Focus Visible — 鍵盤焦點樣式（accessibility-audit.md C6）
   所有互動元素統一 outline，不覆蓋 .form-group input:focus 等既有樣式
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-primary, #185FA5);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Reduced Motion — 尊重用戶偏好減少動畫（accessibility-audit.md M17）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}