/* ============================================================
   Localo — Système de thèmes v2
   Aligné avec la charte premium landing (vert forêt + ivoire + ambre)
   ============================================================ */

/* ── Google Fonts — Sora + Newsreader (aligné landing) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

/* ── Thème par défaut (club_mer) ────────────────────────────── */
:root {
  --localo-primary:          oklch(0.36 0.09 152);   /* vert forêt */
  --localo-primary-mid:      oklch(0.44 0.1  158);
  --localo-primary-contrast: oklch(0.99 0    0);
  --localo-bg:               oklch(0.97 0.014 82);   /* ivoire chaud */
  --localo-surface:          oklch(0.995 0.006 85);
  --localo-surface-alt:      oklch(0.975 0.012 80);
  --localo-accent:           oklch(0.69 0.17  60);   /* ambre CTA */
  --localo-accent-2:         oklch(0.62 0.19  44);
  --localo-border:           oklch(0.88 0.02  80);
  --localo-border-soft:      oklch(0.92 0.012 82);
  --localo-text:             oklch(0.22 0.025 265);
  --localo-muted:            oklch(0.48 0.022 265);
  --localo-subtle:           oklch(0.65 0.016 260);
  --localo-brand-pale:       oklch(0.96 0.025 152);
  --localo-brand-light:      oklch(0.92 0.04  152);
  --localo-shadow-xs:        oklch(0.22 0.025 265 / 0.06);
  --localo-shadow-sm:        oklch(0.22 0.025 265 / 0.11);
  --localo-shadow-md:        oklch(0.22 0.025 265 / 0.17);
  /* Remplacement police système */
  --localo-font:             'Sora', 'Avenir Next', 'SF Pro Text', 'Segoe UI', sans-serif;
  --localo-font-display:     'Newsreader', 'Georgia', ui-serif, serif;
}

/* ── Thème camping mer ──────────────────────────────────────── */
body[data-theme="camping_mer"],
html[data-theme="camping_mer"] {
  --localo-primary:     oklch(0.40 0.1  210);
  --localo-primary-mid: oklch(0.50 0.11 218);
  --localo-bg:          oklch(0.96 0.014 220);
  --localo-surface:     oklch(0.992 0.007 222);
  --localo-accent:      oklch(0.69 0.17  60);
  --localo-border:      oklch(0.87 0.022 215);
  --localo-brand-pale:  oklch(0.95 0.025 210);
}

/* ── Thème camping campagne ─────────────────────────────────── */
body[data-theme="camping_campagne"],
html[data-theme="camping_campagne"] {
  --localo-primary:     oklch(0.36 0.09 145);
  --localo-primary-mid: oklch(0.44 0.1  150);
  --localo-bg:          oklch(0.97 0.014 84);
  --localo-surface:     oklch(0.993 0.007 82);
  --localo-accent:      oklch(0.66 0.16  52);
  --localo-border:      oklch(0.88 0.02  85);
  --localo-brand-pale:  oklch(0.96 0.025 145);
}

/* ── Thème club mer (défaut QR vacanciers) ──────────────────── */
body[data-theme="club_mer"],
html[data-theme="club_mer"] {
  --localo-primary:     oklch(0.38 0.1  215);
  --localo-primary-mid: oklch(0.48 0.11 222);
  --localo-bg:          oklch(0.97 0.013 218);
  --localo-surface:     oklch(0.993 0.007 220);
  --localo-accent:      oklch(0.69 0.17  60);
  --localo-border:      oklch(0.88 0.02  215);
  --localo-brand-pale:  oklch(0.95 0.025 215);
}

/* ── Thème club campagne ────────────────────────────────────── */
body[data-theme="club_campagne"],
html[data-theme="club_campagne"] {
  --localo-primary:     oklch(0.36 0.09 145);
  --localo-primary-mid: oklch(0.44 0.1  148);
  --localo-bg:          oklch(0.97 0.014 88);
  --localo-surface:     oklch(0.993 0.007 85);
  --localo-accent:      oklch(0.64 0.15  56);
  --localo-border:      oklch(0.88 0.02  88);
  --localo-brand-pale:  oklch(0.96 0.025 145);
}

/* ── Thème club montagne ────────────────────────────────────── */
body[data-theme="club_montagne"],
html[data-theme="club_montagne"] {
  --localo-primary:     oklch(0.34 0.08 258);
  --localo-primary-mid: oklch(0.42 0.09 260);
  --localo-bg:          oklch(0.97 0.012 250);
  --localo-surface:     oklch(0.993 0.006 252);
  --localo-accent:      oklch(0.69 0.17  60);
  --localo-border:      oklch(0.88 0.02  250);
  --localo-brand-pale:  oklch(0.96 0.02  255);
}

/* ── Fallback aliases (backend envoie thème court) ──────────── */
html[data-theme="mer"],      body[data-theme="mer"]      { --localo-primary: oklch(0.38 0.1 215); --localo-bg: oklch(0.97 0.013 218); --localo-surface: oklch(0.993 0.007 220); --localo-accent: oklch(0.69 0.17 60); --localo-border: oklch(0.88 0.02 215); }
html[data-theme="montagne"], body[data-theme="montagne"] { --localo-primary: oklch(0.34 0.08 258); --localo-bg: oklch(0.97 0.012 250); --localo-surface: oklch(0.993 0.006 252); --localo-accent: oklch(0.69 0.17 60); --localo-border: oklch(0.88 0.02 250); }
html[data-theme="campagne"], body[data-theme="campagne"] { --localo-primary: oklch(0.36 0.09 145); --localo-bg: oklch(0.97 0.014 88); --localo-surface: oklch(0.993 0.007 85); --localo-accent: oklch(0.64 0.15 56); --localo-border: oklch(0.88 0.02 88); }

/* ── Application du thème sur les composants clés ───────────── */
/* (surcharges légères — le gros du travail est dans premium.css) */

.modern-header,
.send-button,
.connection-indicator,
.header-dashboard-link {
  background: linear-gradient(
    120deg,
    color-mix(in oklch, var(--localo-primary) 88%, black 12%) 0%,
    var(--localo-primary-mid, var(--localo-primary)) 100%
  );
  color: var(--localo-primary-contrast);
}

.bottom-bar,
.modal-content,
.write-zone,
.message-item {
  background: var(--localo-surface);
  border-color: var(--localo-border);
}