/* ================================================================
   _variables.css — Clean SaaS UI: Shared Design Tokens (M.IO Saigon)
   Load trước tất cả CSS theme khác trong _Layout.cshtml
   KHÔNG khai báo :root {} trong file CSS area riêng — dùng var(--xxx) trực tiếp
   ================================================================ */

:root {
    /* Brand */
    --primary:       #4B4A98;
    --primary-hover: #3D3C80;
    --primary-light: #EEEEF7;

    --accent:        #F5B400;
    --accent-light:  #FFF6DE;

    /* Neutrals */
    --bg-body:       #FAFAFA;
    --white:         #FFFFFF;
    --border:        #E4E4E7;
    --text-main:     #18181B;
    --text-muted:    #71717A;
    --gray-light:    #E4E4E7;

    /* Semantic */
    --success:       #00A651;
    --success-light: #E3F7EC;
    --success-text:  #036B36;
    --danger:        #E5484D;
    --danger-light:  #FDECEC;
    --danger-text:   #A81E22;
    --warning:       #F5B400;
    --warning-light: #FFF6DE;
    --warning-text:  #7A5300;
    --info:          #3B82F6;
    --info-light:    #EAF2FE;
    --info-text:     #1D4ED8;

    /* Shape */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16,16,20,.04);
    --shadow-md: 0 4px 12px rgba(16,16,20,.06);
}

html[data-theme="dark"] {
    --primary:       #8886D6;
    --primary-hover: #A5A3E8;
    --primary-light: #23223A;

    --accent:        #F5C445;
    --accent-light:  #2E2711;

    --bg-body:       #101012;
    --white:         #18181B;
    --border:        #2A2A2E;
    --text-main:     #F4F4F5;
    --text-muted:    #A1A1AA;
    --gray-light:    #2A2A2E;

    --success:       #34C77E;
    --success-light: #10321F;
    --success-text:  #34C77E;
    --danger:        #F1696D;
    --danger-light:  #3A1618;
    --danger-text:   #F1696D;
    --warning:       #F5C445;
    --warning-light: #2E2711;
    --warning-text:  #F5C445;
    --info:          #60A5FA;
    --info-light:    #17233A;
    --info-text:     #60A5FA;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);

    color-scheme: dark;
}