/* ======================================= */
/* SHARED TOKENS & BRAND COMPONENTS       */
/* ======================================= */

:root {
    /* === Allereasy core palette === */
    --ae-primary-blue: #2F80ED;
    --ae-primary-blue-light: #4FA0FF;
    --ae-primary-blue-dark: #1C5FCC;

    --ae-text-dark: #2D3436;
    --ae-text-medium: #4F5457;
    --ae-text-light: #6C6F73;

    --ae-bg-light: #FAFAF7;
    --ae-bg-white: #FFFFFF;
    --ae-bg-grey: #F2F3F5;

    --ae-border-light: #D5DADF;
    --ae-border-medium: #BFC5CA;

    --ae-accent-mint: #6EE7B7;
    --ae-accent-mint-dark: #34D399;

    --ae-warning-orange: #F2994A;
    --ae-error-red: #EB5757;
    --ae-success-green: #27AE60;

    /* === App-wide tokens (admin + public) === */
    --ms-bg: var(--ae-bg-light);
    --ms-surface: var(--ae-bg-white);
    --ms-surface-soft: #f9fafb;

    --ms-primary: var(--ae-primary-blue);
    --ms-primary-soft: #e3efff;
    --ms-primary-strong: #1c3d8f;
    --ms-accent: var(--ae-accent-mint);

    --ms-border: var(--ae-border-light);
    --ms-text: var(--ae-text-dark);
    --ms-text-muted: var(--ae-text-light);
    --ms-danger: var(--ae-error-red);
    --ms-success: var(--ae-success-green);

    /* === Theme tokens (used by pills/buttons etc.) === */
    --primary: var(--ae-primary-blue);
    --secondary: var(--ae-primary-blue-dark);
    --accent: var(--ae-accent-mint);
    --text: var(--ae-text-dark);
    --bg: var(--ae-bg-white);
    --font-family: system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", sans-serif;
}

/* BRAND BUTTONS & PILLS                   */
/* (used across public + dashboard)        */
/* ======================================= */

.ms-pill,
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.2rem;
    border-radius: 999px; /* pill shape */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

/* Slight lift on hover */
.ms-pill:hover,
.ms-btn:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Active/selected state (subcategory/selected pill) */
.ms-pill.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
}

/* Optional ghost/outline version */
.ms-pill-ghost {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.ms-pill-ghost:hover {
    background: var(--primary);
    color: #ffffff;
}

/* Back icon button — same styling, just slightly smaller */
.ms-btn-back {
    padding: 0.4rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Small variation used for nav/in-header actions */
.ms-btn-small {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1;
}

.ms-btn-ghost {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.ms-btn-ghost:hover {
    background: var(--primary);
    color: #ffffff;
}

.header-logo {
    height: 20px;     /* adjust to suit */
    width: auto;
    object-fit: contain;
}

.header-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}