/* ======================================================
   Airlie Beach Theme Colors
====================================================== */

/* ======================================================
   Safe Area Insets (iOS notch / Android cutout / Home indicator)
====================================================== */
:root {
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left, 0px);
  --safe-area-right:  env(safe-area-inset-right, 0px);
}

/* Utility: apply safe area padding to fixed/sticky elements */
.pt-safe  { padding-top:    env(safe-area-inset-top,    0px) !important; }
.pb-safe  { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.pl-safe  { padding-left:   env(safe-area-inset-left,   0px) !important; }
.pr-safe  { padding-right:  env(safe-area-inset-right,  0px) !important; }

/* ---------- Light Mode（方案 01-B「碧海潟湖青藍」＋新基本色板，2026-09-18 定案） ---------- */
/* 每個顏色都配一個逗號分隔的 -rgb 版本，給 rgba(var(--color-x-rgb), <alpha>) 這種透明度寫法用，
   也是 2026-09-24 深色模式改用「Tailwind class 直接引用 CSS 變數」架構的關鍵：
   tailwind.config.js 裡的顏色現在寫成 rgba(var(--color-x-rgb), <alpha-value>)，
   所以同一個 bg-primary class 在深色模式會自動變成這裡 Dark 區塊的值，不用另外加 dark: class。 */
:root {
  --color-bg-primary: #F8FAFC;    /* 白沙微光 */
  --color-bg-primary-rgb: 248, 250, 252;
  --color-bg-secondary: #FFFFFF;  /* 純白卡片 */
  --color-bg-secondary-rgb: 255, 255, 255;

  --color-text-primary: #0F172A;   /* 深海黑 */
  --color-text-primary-rgb: 15, 23, 42;
  --color-text-secondary: #64748B; /* 次級石板灰 */
  --color-text-secondary-rgb: 100, 116, 139;

  --color-brand-primary: #0EA5E9; /* 潟湖青藍（Light/Dark 共用，方案 01-B） */
  --color-brand-primary-rgb: 14, 165, 233; /* 同上，給需要調透明度的地方用 rgba(var(--color-brand-primary-rgb), .15) */
  --color-accent-success: #0D9488; /* 碧海松石綠 */
  --color-accent-success-rgb: 13, 148, 136;

  --color-button-bg: #0EA5E9;
  --color-button-text: #FFFFFF;
  --color-button-text-rgb: 255, 255, 255;

  --color-border: #E2E8F0; /* 晨光柔和框線 */
  --color-border-rgb: 226, 232, 240;
  --color-surface-soft: #F1F5F9; /* 中性淺灰，卡片/面板底色用 */
  --color-surface-soft-rgb: 241, 245, 249;
  --color-on-primary-container: #0C4A6E; /* 深海文字，疊在 container-tint 上用 */
  --color-on-primary-container-rgb: 12, 74, 110;

  /* 延伸強調色（方案 01-B，特定元件跳色用，不當背景/文字地基） */
  --color-accent-cta: #FB923C;      /* 暖沙澄橘・Primary CTA 按鈕 */
  --color-accent-cta-rgb: 251, 146, 60;
  --color-water: #38BDF8;           /* 水色漸層裝飾 */
  --color-water-rgb: 56, 189, 248;
  --color-container-tint: #E0F2FE;  /* 微風容器 */
  --color-container-tint-rgb: 224, 242, 254;

  /* 語意色 */
  --color-error: #DC2626;
  --color-error-rgb: 220, 38, 38;
  --color-warning: #F59E0B;
  --color-warning-rgb: 245, 158, 11;
  --color-warning-soft: #FFFBEB;      /* 柔和版警示底色（徽章/標籤用） */
  --color-warning-soft-rgb: 255, 251, 235;
  --color-warning-soft-text: #78350F; /* 搭配 warning-soft 的深色對比文字 */
  --color-warning-soft-text-rgb: 120, 53, 15;
  --color-like: #E11D48;
  --color-like-rgb: 225, 29, 72;
}

/* ---------- Dark Mode（方案 01-B「碧海潟湖青藍」＋新基本色板，2026-09-18 定案） ---------- */
/* 2026-09-24：觸發方式從 [data-theme="dark"] 屬性改成直接跟隨系統設定
   （@media prefers-color-scheme），不用 JS、不用手動切換 UI（已決定方向）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0B0F17;    /* 深淵午夜 */
    --color-bg-primary-rgb: 11, 15, 23;
    --color-bg-secondary: #151D2A;  /* 沉積岩石 */
    --color-bg-secondary-rgb: 21, 29, 42;

    --color-text-primary: #F8FAFC;   /* 極星純白 */
    --color-text-primary-rgb: 248, 250, 252;
    --color-text-secondary: #94A3B8; /* 柔和淺灰藍 */
    --color-text-secondary-rgb: 148, 163, 184;

    --color-brand-primary: #0EA5E9; /* 同 Light，方案 01-B 主色不分模式 */
    --color-brand-primary-rgb: 14, 165, 233;
    --color-accent-success: #2DD4BF; /* 螢光翡翠綠 */
    --color-accent-success-rgb: 45, 212, 191;

    --color-button-bg: #0EA5E9;
    --color-button-text: #FFFFFF;
    --color-button-text-rgb: 255, 255, 255;

    --color-border: #1E293B; /* 夜幕深邃框線 */
    --color-border-rgb: 30, 41, 59;
    --color-surface-soft: #1A2333; /* 深色中性面板底色 */
    --color-surface-soft-rgb: 26, 35, 51;
    --color-on-primary-container: #F8FAFC; /* 疊在深色 container-tint 上的淺色文字 */
    --color-on-primary-container-rgb: 248, 250, 252;

    /* 延伸強調色（方案 01-B） */
    --color-accent-cta: #FB923C;      /* 夜暮暖橙・Primary CTA Glow */
    --color-accent-cta-rgb: 251, 146, 60;
    --color-water: #14B8A6;           /* 碧水翡翠（Dark 用 turquoise 取代 water） */
    --color-water-rgb: 20, 184, 166;
    --color-container-tint: #164E63;  /* 幽邃深淵（Dark 用 abyss-deep 取代 container） */
    --color-container-tint-rgb: 22, 78, 99;

    /* 語意色（深色底提高亮度避免看不清楚） */
    --color-error: #F87171;
    --color-error-rgb: 248, 113, 113;
    --color-warning: #FBBF24;
    --color-warning-rgb: 251, 191, 36;
    --color-warning-soft: #3A2A0F;      /* 深色底的柔和警示色 */
    --color-warning-soft-rgb: 58, 42, 15;
    --color-warning-soft-text: #FDE68A; /* 搭配深色 warning-soft 的淺色文字 */
    --color-warning-soft-text-rgb: 253, 230, 138;
    --color-like: #FB7185;
    --color-like-rgb: 251, 113, 133;
  }
}

/* Compatibility aliases for legacy variable names.
   只需要定義一次：這幾個 alias 引用 --color-x，--color-x 本身已經會跟著
   上面的 @media (prefers-color-scheme: dark) 自動切換，alias 不用再重複定義一次深色版本。 */
:root {
  --bg-main: var(--color-bg-primary);
  --bg-card: var(--color-bg-secondary);
  --text-main: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --brand: var(--color-brand-primary);
  --accent: var(--color-accent-success);
  --btn-bg: var(--color-button-bg);
  --btn-text: var(--color-button-text);
  --border: var(--color-border);
}

/* Helper classes used by the page (moved from inline <style>) */
html { background-color: var(--bg-main); }
.bg-main { background-color: var(--bg-main); }
.bg-card { background-color: var(--bg-card); }
.text-main { color: var(--text-main); }
.text-secondary { color: var(--text-secondary); }
.brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.border-theme { border-color: var(--border); }
.border-button-bg { border-color: var(--color-button-bg); }
.bg-accent-cta { background-color: var(--color-accent-cta); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.like-btn { color: #9ca3af; }
.like-btn.liked { color: var(--color-like); }

/* 表單輸入框：預設邊框用 water，focus 時邊框+外框光暈換成 accent-cta */
.input-field {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-water);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-field:focus {
  border-color: var(--color-accent-cta);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-cta-rgb), .25);
}

/* 浮動圖示按鈕（疊在照片上用，例如倒退鍵/Like）：選項 C 深色霧面玻璃，2026-09-18 定案 */
.icon-btn-floating {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  transition: background .15s ease;
}
.icon-btn-floating:hover { background: rgba(15, 23, 42, .55); }

/* 純色 Header 上的圖示按鈕（不是疊在照片上，跟上面那個是不同情境） */
.icon-btn-plain {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  color: var(--color-text-primary);
  transition: background .15s ease, color .15s ease;
}
.icon-btn-plain:hover { background: var(--color-water); color: #fff; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }