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

/* ---------- Light Mode (Beach Day) ---------- */
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f8fa;

  --color-text-primary: #333333;
  --color-text-secondary: #666666;

  --color-brand-primary: #00BCD4;
  --color-accent-success: #4CAF50;

  --color-button-bg: #00BCD4;
  --color-button-text: #FFFFFF;

  --color-border: #E0E0E0;
}

/* ---------- Dark Mode (Beach Night) ---------- */
[data-theme="dark"] {
  --color-bg-primary: #121212;
  --color-bg-secondary: #1E1E1E;

  --color-text-primary: #E0E0E0;
  --color-text-secondary: #B0B0B0;

  --color-brand-primary: #26C6DA;
  --color-accent-success: #66BB6A;

  --color-button-bg: #26C6DA;
  --color-button-text: #121212;

  --color-border: #333333;
}

/* Compatibility aliases for legacy variable names (.dark class and --bg-*/)
: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);
}

.dark,
[data-theme="dark"] {
  --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); }
.like-btn { color: #9ca3af; }
.like-btn.liked { color: #ef4444; }
.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; }