/*
 * church-ops / src/css/theme.css
 * ─────────────────────────────────────────────────────────────────────────────
 * 系統共用的 CSS 自訂變數（Design Tokens）
 * 本檔案為整個應用程式的樣式唯一來源（Single Source of Truth）。
 * 所有頁面（index.html、home.html、data.html、dashboard.html）均應引用本檔案，
 * 而不是各自複製這些變數。
 *
 * 路徑：從各頁面引用時，相對路徑為 ../src/css/theme.css
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── 淺色模式（預設） ──────────────────────────────────────────────────── */
:root {
  --border: hsl(226 36% 88%);
  --input: hsl(226 36% 88%);
  --ring: hsl(245 72% 62%);
  --background: hsl(224 60% 97%);
  --foreground: hsl(222 47% 14%);

  --primary: hsl(245 72% 58%);
  --primary-foreground: hsl(0 0% 98%);

  --secondary: hsl(230 52% 94%);
  --secondary-foreground: hsl(238 46% 30%);

  --muted: hsl(226 42% 95%);
  --muted-foreground: hsl(222 18% 45%);

  --accent: hsl(184 55% 91%);
  --accent-foreground: hsl(190 70% 24%);

  /* 卡片（Card） */
  --card-raw: 0, 0%, 100%;
  --card: hsl(var(--card-raw));
  --card-foreground: hsl(222 47% 14%);

  /* 側邊欄（Sidebar）—— 僅 index.html 使用，其餘頁面無害 */
  --sidebar-background-raw: 228, 60%, 97%;
  --sidebar-background: hsl(var(--sidebar-background-raw));
  --sidebar-foreground: hsl(226 35% 30%);
  --sidebar-primary: hsl(245 72% 58%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(239 70% 94%);
  --sidebar-accent-foreground: hsl(245 58% 38%);
  --sidebar-border: hsl(226 36% 88%);
  --sidebar-ring: hsl(245 72% 62%);

  /* 玻璃模糊效果（Glassmorphism） */
  --panel-blur: 0px;
  --panel-bg-opacity: 1;
  --panel-shadow: 0 18px 48px hsl(226 48% 40% / 0.10), 0 2px 8px hsl(226 48% 40% / 0.06);
  --panel-shadow-soft: 0 8px 24px hsl(226 48% 40% / 0.08);
  --panel-highlight: hsl(0 0% 100% / 0.72);

  /* 緊湊度（Density）— 標準值（Standard） */
  --density-padding-y: 0.5rem;
  --density-padding-x: 0.75rem;
  --density-gap: 1rem;
  --density-margin-y: 0.5rem;
}

/* ─── 深色模式 ─────────────────────────────────────────────────────────── */
html.dark {
  --border: hsl(220 39% 24%);
  --input: hsl(220 39% 24%);
  --ring: hsl(258 90% 72%);
  --background: hsl(222 58% 8%);
  --foreground: hsl(218 40% 96%);

  --primary: hsl(258 88% 70%);
  --primary-foreground: hsl(222 58% 8%);

  --secondary: hsl(229 42% 18%);
  --secondary-foreground: hsl(220 36% 94%);

  --muted: hsl(222 38% 16%);
  --muted-foreground: hsl(219 22% 69%);

  --accent: hsl(190 55% 19%);
  --accent-foreground: hsl(184 52% 86%);

  --card-raw: 222, 50%, 12%;
  --card: hsl(var(--card-raw));
  --card-foreground: hsl(218 40% 96%);

  --sidebar-background-raw: 223, 60%, 8%;
  --sidebar-background: hsl(var(--sidebar-background-raw));
  --sidebar-foreground: hsl(219 24% 76%);
  --sidebar-primary: hsl(258 88% 70%);
  --sidebar-primary-foreground: hsl(222 58% 8%);
  --sidebar-accent: hsl(252 45% 21%);
  --sidebar-accent-foreground: hsl(258 78% 88%);
  --sidebar-border: hsl(220 39% 22%);
  --sidebar-ring: hsl(258 90% 72%);
  --panel-shadow: 0 22px 56px hsl(224 80% 2% / 0.44), 0 2px 10px hsl(258 80% 45% / 0.08);
  --panel-shadow-soft: 0 10px 30px hsl(224 80% 2% / 0.34);
  --panel-highlight: hsl(220 60% 90% / 0.12);
}

/* ─── 高對比輔助模式（High Contrast） ─────────────────────────────────── */
html.high-contrast {
  --border: hsl(0 0% 100%);
  --input: hsl(0 0% 100%);
  --ring: hsl(240 100% 50%);
  --background: hsl(0 0% 0%);
  --foreground: hsl(0 0% 100%);

  --primary: hsl(240 100% 50%);
  --primary-foreground: hsl(0 0% 100%);

  --secondary: hsl(0 0% 10%);
  --secondary-foreground: hsl(0 0% 100%);

  --muted: hsl(0 0% 20%);
  --muted-foreground: hsl(0 0% 90%);

  --accent: hsl(240 100% 50%);
  --accent-foreground: hsl(0 0% 100%);

  --card-raw: 0, 0%, 0%;
  --card: hsl(var(--card-raw));
  --card-foreground: hsl(0 0% 100%);

  --sidebar-background-raw: 0, 0%, 0%;
  --sidebar-background: hsl(var(--sidebar-background-raw));
  --sidebar-foreground: hsl(0 0% 100%);
  --sidebar-border: hsl(0 0% 100%);
}

/* ─── 緊湊度調整（Density Modifiers） ─────────────────────────────────── */
body.density-comfortable {
  --density-padding-y: 0.75rem;
  --density-padding-x: 1rem;
  --density-gap: 1.25rem;
  --density-margin-y: 0.75rem;
}

body.density-compact {
  --density-padding-y: 0.25rem;
  --density-padding-x: 0.5rem;
  --density-gap: 0.5rem;
  --density-margin-y: 0.25rem;
}

/* Visual skin: contemporary glass (light) / midnight chapel (dark).
 * These rules intentionally affect paint only; layout and component geometry
 * remain owned by each page.
 */
body {
  color-scheme: light;
}

html.dark body {
  color-scheme: dark;
}

html.iframe-embedded body.iframe-background-synced {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

html.iframe-embedded body.iframe-background-synced::before {
  content: "";
  position: fixed;
  z-index: -2;
  left: calc(-1 * var(--iframe-offset-x, 0px));
  top: calc(-1 * var(--iframe-offset-y, 0px));
  width: var(--parent-viewport-width, 100vw);
  height: var(--parent-viewport-height, 100vh);
  background: var(--iframe-synced-background);
  pointer-events: none;
}

html.iframe-embedded body.iframe-background-synced::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg,
    hsla(var(--card-raw), calc(var(--panel-bg-opacity) * 0.45)) 0%,
    hsla(var(--card-raw), calc(var(--panel-bg-opacity) * 0.25)) 100%
  );
  pointer-events: none;
}

body .bg-card,
body .bg-white,
body header.bg-card {
  box-shadow: var(--panel-shadow-soft) !important;
  border-color: var(--border) !important;
}

body .glass-panel {
  box-shadow: var(--panel-shadow) !important;
  border-color: var(--border) !important;
}

body .bg-card,
body .bg-white,
body .glass-panel,
body header {
  background-clip: padding-box !important;
}

body .bg-card::selection,
body .bg-white::selection,
body .glass-panel::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

body button,
body a,
body input,
body select,
body textarea {
  outline-color: var(--ring);
}

body input[type="range"] {
  accent-color: var(--primary) !important;
}

body ::-webkit-scrollbar-thumb {
  background: hsl(245 45% 55% / 0.28) !important;
}

html.dark body ::-webkit-scrollbar-thumb {
  background: hsl(258 70% 72% / 0.30) !important;
}