/* ============================================================
   Beauty Manager — Brand Tokens v1.1
   Palette rút từ logo: coral pink → magenta gradient + wine
   ============================================================ */
:root {
    --brand-coral:        #FF8FAB;
    --brand-coral-light:  #FFC4D6;
    --brand-pink-soft:    #FFE4EC;
    --brand-magenta:      #C2185B;
    --brand-magenta-deep: #A01548;
    --brand-wine:         #4A1825;
    --brand-wine-light:   #6D2A3F;

    --brand-gradient:      linear-gradient(135deg, #FF8FAB 0%, #C2185B 100%);
    --brand-gradient-soft: linear-gradient(135deg, #FFE4EC 0%, #FFC4D6 100%);
    --brand-gradient-wine: linear-gradient(180deg, #4A1825 0%, #6D2A3F 100%);

    --color-text-primary:    #4A1825;
    --color-text-secondary:  #888780;
    --color-text-muted:      #B4B2A9;
    --color-text-on-brand:   #FFFFFF;

    --color-bg-page:         #FFF9FB;
    --color-bg-card:         #FFFFFF;
    --color-bg-card-tint:    #FFF5F8;
    --color-bg-card-accent:  #FFE4EC;
    --color-border-soft:     #FFD4DD;
    --color-border-tertiary: rgba(74,24,37,0.10);

    --color-success: #1D9E75; --color-success-light: #E1F5EE; --color-success-dark: #0F6E56;
    --color-warning: #BA7517; --color-warning-light: #FAEEDA; --color-warning-dark: #854F0B;
    --color-danger:  #E24B4A; --color-danger-light:  #FCEBEB; --color-danger-dark:  #A32D2D;
    --color-info:    #378ADD; --color-info-light:    #E6F1FB; --color-info-dark:    #185FA5;

    --sidebar-width:   260px;
    --topbar-height:   56px;
    --border-radius:   0.625rem;
    --border-radius-lg:0.875rem;
    --shadow-sm:       0 1px 3px rgba(74,24,37,0.05);
    --shadow-md:       0 4px 14px rgba(194,24,91,0.12);
    --shadow-brand:    0 4px 14px rgba(194,24,91,0.25);
}

.btn-primary {
    background: var(--brand-gradient);
    border: none; color: white;
    box-shadow: var(--shadow-brand);
    transition: all .18s;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #FF7A9C 0%, #A01548 100%);
    color: white; transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(194,24,91,0.32);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary {
    color: var(--brand-magenta);
    border: 0.5px solid var(--color-border-soft);
    background: white;
}
.btn-outline-primary:hover {
    background: var(--brand-magenta);
    border-color: var(--brand-magenta); color: white;
}
.btn-wine { background: var(--brand-wine); color: white; border: none; }
.btn-wine:hover { background: var(--brand-wine-light); color: white; }

.text-primary    { color: var(--brand-magenta) !important; }
.text-wine       { color: var(--brand-wine) !important; }
.bg-brand-soft   { background: var(--brand-pink-soft); }
.bg-brand-accent { background: var(--color-bg-card-accent); }

a { color: var(--brand-magenta); text-decoration: none; }
a:hover { color: var(--brand-magenta-deep); }

.bm-pill {
    display: inline-block; padding: 3px 10px;
    font-size: 0.75rem; font-weight: 500;
    border-radius: 999px; line-height: 1.5;
}
.bm-pill-primary   { background: var(--brand-pink-soft); color: var(--brand-magenta); }
.bm-pill-secondary { background: #F1EFE8; color: #5F5E5A; }
.bm-pill-info      { background: var(--color-info-light); color: var(--color-info-dark); }
.bm-pill-success   { background: var(--color-success-light); color: var(--color-success-dark); }
.bm-pill-warning   { background: var(--color-warning-light); color: var(--color-warning-dark); }
.bm-pill-danger    { background: var(--color-danger-light); color: var(--color-danger-dark); }
.bm-pill-wine      { background: var(--brand-wine); color: white; }
.bm-pill-gradient  { background: var(--brand-gradient); color: white; }

.bm-role-owner        { background: var(--brand-wine); color: white; }
.bm-role-admin        { background: #534AB7; color: white; }
.bm-role-manager      { background: var(--brand-magenta); color: white; }
.bm-role-receptionist { background: var(--color-success); color: white; }
.bm-role-advisor      { background: var(--color-info); color: white; }
.bm-role-cashier      { background: var(--color-warning); color: white; }
.bm-role-doctor       { background: #0F766E; color: white; }
.bm-role-technician   { background: #5DCAA5; color: var(--color-success-dark); }