/**
 * Mojeaga – Shared Design Tokens & Global Styles
 * Used across: Login, Register, Distributor Dashboard, Stockist Dashboard
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── CSS Custom Properties ─────────────────────────────────── */
:root {
    --clr-primary:    #0F8A3E;
    --clr-primary-dk: #0a6b2f;
    --clr-primary-lt: #e8f5ee;
    --clr-gold:       #D4AF37;
    --clr-gold-lt:    #fdf7e0;
    --clr-dark:       #1F2937;
    --clr-dark-2:     #374151;
    --clr-mid:        #6B7280;
    --clr-border:     #E5E7EB;
    --clr-light:      #F5F7FA;
    --clr-white:      #FFFFFF;
    --clr-accent:     #2563EB;
    --clr-red:        #EF4444;
    --clr-orange:     #F97316;
    --clr-purple:     #8B5CF6;
    --clr-teal:       #14B8A6;

    --font-body:  'Inter', sans-serif;
    --font-head:  'Poppins', sans-serif;
    --font-mono:  'JetBrains Mono', monospace;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.12);

    --trans:      0.22s ease;
}

/* Dark mode */
body.mojeaga-dark {
    --clr-dark:   #F9FAFB;
    --clr-dark-2: #D1D5DB;
    --clr-mid:    #9CA3AF;
    --clr-border: #374151;
    --clr-light:  #111827;
    --clr-white:  #1F2937;
}

/* ─── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.mojeaga-page {
    font-family: var(--font-body);
    background: var(--clr-light);
    color: var(--clr-dark);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ─── Utility ────────────────────────────────────────────────── */
.mjn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--trans);
    text-decoration: none;
    white-space: nowrap;
}

.mjn-btn-primary {
    background: var(--clr-primary);
    color: #fff;
}
.mjn-btn-primary:hover {
    background: var(--clr-primary-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15,138,62,.35);
}

.mjn-btn-gold {
    background: var(--clr-gold);
    color: #1a1200;
}
.mjn-btn-gold:hover {
    background: #c29a2b;
    transform: translateY(-1px);
}

.mjn-btn-outline {
    background: transparent;
    border: 2px solid var(--clr-primary);
    color: var(--clr-primary);
}
.mjn-btn-outline:hover {
    background: var(--clr-primary-lt);
}

.mjn-btn-lg { padding: 14px 32px; font-size: 16px; }
.mjn-btn-full { width: 100%; }

.mjn-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border);
    padding: 24px;
    transition: box-shadow var(--trans);
}
.mjn-card:hover { box-shadow: var(--shadow-md); }

/* ─── Form Elements ──────────────────────────────────────────── */
.mjn-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.mjn-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-dark-2);
    letter-spacing: .01em;
}

.mjn-input {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-dark);
    background: var(--clr-white);
    transition: border-color var(--trans), box-shadow var(--trans);
    outline: none;
}
.mjn-input:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(15,138,62,.15);
}
.mjn-input.is-error {
    border-color: var(--clr-red);
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.mjn-input.is-success {
    border-color: var(--clr-primary);
}

.mjn-error-msg {
    font-size: 12px;
    color: var(--clr-red);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* ─── Badge Pills ────────────────────────────────────────────── */
.mjn-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}
.mjn-badge-green  { background: var(--clr-primary-lt); color: var(--clr-primary); }
.mjn-badge-gold   { background: var(--clr-gold-lt);    color: #8a6800; }
.mjn-badge-red    { background: #fef2f2;                color: var(--clr-red); }
.mjn-badge-blue   { background: #eff6ff;                color: var(--clr-accent); }
.mjn-badge-purple { background: #f5f3ff;                color: var(--clr-purple); }

/* ─── Alert Boxes ────────────────────────────────────────────── */
.mjn-alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.mjn-alert-success { background: var(--clr-primary-lt); color: var(--clr-primary-dk); border-left: 4px solid var(--clr-primary); }
.mjn-alert-error   { background: #fef2f2;                color: #b91c1c;               border-left: 4px solid var(--clr-red); }
.mjn-alert-warning { background: #fffbeb;                color: #92400e;               border-left: 4px solid var(--clr-gold); }

/* ─── Skeleton Loaders ───────────────────────────────────────── */
.mjn-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-wave {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Toast Notifications ────────────────────────────────────── */
#mjn-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mjn-toast {
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    animation: toast-in .3s ease forwards;
}
.mjn-toast-success { background: var(--clr-primary); }
.mjn-toast-error   { background: var(--clr-red); }
.mjn-toast-warning { background: var(--clr-orange); }
@keyframes toast-in {
    from { opacity:0; transform:translateX(40px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ─── Mobile Global Fixes ────────────────────────────────────── */
@media (max-width: 600px) {
    #mjn-toast-container {
        top: auto;
        bottom: 20px;
        right: 12px;
        left: 12px;
    }
    .mjn-toast { min-width: unset; width: 100%; font-size: 13px; }

    /* Touch-friendly inputs & buttons */
    .mjn-input  { min-height: 46px; font-size: 16px; } /* 16px prevents iOS zoom */
    .mjn-btn    { min-height: 46px; }
    select, textarea { font-size: 16px; } /* prevent iOS auto-zoom */

    /* Cards: reduce horizontal padding */
    .mjn-card   { padding: 16px; }
}