/*
 * Resonate Mail — Mailwizz Frontend (Login/Register) Custom Theme
 * Overrides Mailwizz CSS variables to match resonatemail.com brand.
 * This file is auto-loaded by Mailwizz — no theme registration needed.
 */

/* ─── 1. Font ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

body,
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* ─── 2. CSS variable overrides ────────────────────────────────────────────── */
:root {
    --mz-primary:            #1c1917;
    --mz-primary-text-color: #1c1917;
    --mz-light-primary:      #f5f5f4;
    --mz-active-primary:     #292524;
    --mz-primary-rgb:        28, 25, 23;

    --mz-body-color:         #44403c;
    --mz-body-bg:            #fafaf9;
    --mz-background-color:   #fafaf9;
    --mz-form-text-color:    #1c1917;

    --mz-dashed-border-color: #e7e5e4;
    --mz-input-border-color:  #d6d3d1;
    --mz-input-color:         #f5f5f4;
    --mz-input-focus-color:   #e7e5e4;
    --mz-border-color:        #f5f5f4;

    --mz-text-gray:           #78716c;
    --mz-placeholder-color:   #a8a29e;
}

/* ─── 3. Login page background ──────────────────────────────────────────────── */
body.login-page,
body.register-page {
    background-color: #fafaf9 !important;
}

/* ─── 4. Login card ─────────────────────────────────────────────────────────── */
.login-box,
.register-box {
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* ─── 5. Logo above the login form ──────────────────────────────────────────── */
.login-form::before {
    content: '';
    display: block;
    background-image: url('/customer/assets/img/logo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    width: 200px;
    height: 56px;
    margin-bottom: 32px;
}

/* ─── 6. General link colour ─────────────────────────────────────────────────── */
a:not(.btn) {
    color: #1c1917;
}

a:not(.btn):hover {
    color: #44403c;
}