/* =============================================
   Front-End Light / Dark MODE (visitor switch)
   Loaded AFTER theme-defaults-frontend.css and themes-frontend.css.

   - The admin's front-end theme decides the starting mode: dark themes
     render <html data-bs-theme="dark">, light themes "light".
   - The visitor's sun/moon switch stores "fe-mode" in localStorage. When it
     differs from the admin theme's family, <html data-mode="light|dark"> is
     set and the blocks below override every SURFACE/TEXT variable while the
     theme's accent colours are kept.
   - :root[data-mode] (0,2,0) outranks [data-theme="X"] (0,1,0) on purpose.
   ============================================= */

/* ----- Secondary tokens that light themes need (Light/Cloud/Mint/Pearl) ----- */
[data-bs-theme="light"] {
    --text-dim: #6b7a90;   /* 4.5:1 on white; the themes' #94a3b8 is only 2.9:1 */
    --text-strong: #0f172a;
    --accent-text: var(--accent-dark);
    --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
    --surface-soft: rgba(0,0,0,0.03);
    --surface-softer: rgba(0,0,0,0.015);
    --placeholder: #cbd5e1;
    --shadow: rgba(15,23,42,0.12);
    --success-bg: #dcfce7;
    --success-text: #15803d;
    --warning-bg: #fef9c3;
    --warning-text: #a16207;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;
    --card-glass: rgba(255,255,255,0.86);
    --hero-overlay: linear-gradient(135deg, rgba(248,250,252,0.88) 0%, rgba(241,245,249,0.82) 50%, rgba(248,250,252,0.9) 100%);
}

/* ----- Visitor forced LIGHT on top of a dark admin theme ----- */
:root[data-mode="light"] {
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-surface: rgba(255,255,255,0.92);
    --bg-nav: rgba(255,255,255,0.95);
    --bg-overlay: rgba(248,250,252,0.85);
    --border: rgba(0,0,0,0.1);
    --border-light: rgba(0,0,0,0.06);
    --text: #1e293b;
    --text-muted: #64748b;
    --text-dim: #6b7a90;
    --success: #16a34a;
    --danger: #dc2626;
    --hover-overlay: rgba(0,0,0,0.04);
    --focus-overlay: rgba(0,0,0,0.06);
    --accent-light: color-mix(in srgb, var(--accent) 10%, transparent);

    --text-strong: #0f172a;
    --accent-text: var(--accent-dark);
    --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
    --surface-soft: rgba(0,0,0,0.03);
    --surface-softer: rgba(0,0,0,0.015);
    --placeholder: #cbd5e1;
    --shadow: rgba(15,23,42,0.12);
    --success-bg: #dcfce7;
    --success-text: #15803d;
    --warning-bg: #fef9c3;
    --warning-text: #a16207;
    --danger-bg: #fee2e2;
    --danger-text: #b91c1c;
    --card-glass: rgba(255,255,255,0.86);
    --hero-overlay: linear-gradient(135deg, rgba(248,250,252,0.88) 0%, rgba(241,245,249,0.82) 50%, rgba(248,250,252,0.9) 100%);
}

/* ----- Visitor forced DARK on top of a light admin theme ----- */
:root[data-mode="dark"] {
    --bg-body: #111827;
    --bg-card: #1e293b;
    --bg-card-hover: #263348;
    --bg-surface: rgba(30,41,59,0.85);
    --bg-nav: rgba(17,24,39,0.9);
    --bg-overlay: rgba(17,24,39,0.6);
    --border: rgba(255,255,255,0.1);
    --border-light: rgba(255,255,255,0.15);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --success: #22c55e;
    --danger: #ef4444;
    --hover-overlay: rgba(255,255,255,0.06);
    --focus-overlay: rgba(255,255,255,0.08);
    --accent-light: color-mix(in srgb, var(--accent) 15%, transparent);

    --text-strong: #f1f5f9;
    --accent-text: color-mix(in srgb, var(--accent) 70%, white);
    --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
    --surface-soft: rgba(255,255,255,0.03);
    --surface-softer: rgba(255,255,255,0.02);
    --placeholder: #334155;
    --shadow: rgba(0,0,0,0.3);
    --success-bg: rgba(34,197,94,0.12);
    --success-text: #4ade80;
    --warning-bg: rgba(234,179,8,0.12);
    --warning-text: #facc15;
    --danger-bg: rgba(239,68,68,0.12);
    --danger-text: #f87171;
    --card-glass: rgba(30,41,59,0.78);
    --hero-overlay: linear-gradient(135deg, rgba(17,24,39,0.55) 0%, rgba(30,41,59,0.4) 50%, rgba(17,24,39,0.58) 100%);
}

/* ----- The sun/moon switch in the public header ----- */
.mode-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mode-toggle:hover { background: var(--hover-overlay); color: var(--text); border-color: var(--border-light); }
.mode-toggle:active { background: var(--focus-overlay); color: var(--text); }
.mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On phones it sits beside the hamburger so it is reachable without opening the menu;
   on desktop it moves to the end of the bar, after the language menu. */
.mode-toggle { margin-inline-start: auto; margin-inline-end: 0.5rem; }
@media (min-width: 992px) {
    .mode-toggle { order: 10; margin-inline-start: 0.5rem; margin-inline-end: 0; }
}