/* ==========================================================
   Bizgix Design Tokens
   File: assets/css/variables.css
========================================================== */

:root{

    /* ======================================================
       BRAND
       Change core brand colors here
    ====================================================== */

    --bgx-primary:#2563eb;
    --bgx-primary-hover:#1d4ed8;
    --bgx-primary-dark:#1e40af;

    --bgx-secondary:#18afd0;
    --bgx-secondary-hover:#0ea5c6;
    --bgx-secondary-dark:#168da8;


    /* ======================================================
       BRAND SOFT
    ====================================================== */

    --bgx-primary-soft:#eff6ff;
    --bgx-primary-soft-hover:#e7f0ff;

    --bgx-secondary-soft:#ecfbfe;
    --bgx-secondary-soft-hover:#ddf7fb;


    /* ======================================================
       BRAND BORDERS
    ====================================================== */

    --bgx-primary-border:#bfdbfe;
    --bgx-secondary-border:#c8f0f7;


    /* ======================================================
       BRAND GRADIENTS
    ====================================================== */

    --bgx-gradient-primary:
        linear-gradient(
            135deg,
            var(--bgx-primary) 0%,
            #3978ee 100%
        );

    --bgx-gradient-brand:
        linear-gradient(
            135deg,
            var(--bgx-primary) 0%,
            var(--bgx-secondary) 100%
        );

    --bgx-gradient-soft:
        linear-gradient(
            135deg,
            var(--bgx-primary-soft) 0%,
            var(--bgx-secondary-soft) 100%
        );


    /* ======================================================
       BRAND GLOW
    ====================================================== */

    --bgx-primary-glow:
        rgba(37,99,235,.12);

    --bgx-secondary-glow:
        rgba(24,175,208,.12);


    /* ======================================================
       BASE COLORS
       These should be used instead of raw white / black
    ====================================================== */

    --bgx-white:#ffffff;
    --bgx-black:#000000;

    --bgx-neutral-25:#fcfcfd;
    --bgx-neutral-50:#f8fafc;
    --bgx-neutral-100:#f1f5f9;
    --bgx-neutral-200:#e2e8f0;
    --bgx-neutral-300:#cbd5e1;
    --bgx-neutral-400:#94a3b8;
    --bgx-neutral-500:#64748b;
    --bgx-neutral-600:#475569;
    --bgx-neutral-700:#334155;
    --bgx-neutral-800:#1e293b;
    --bgx-neutral-900:#0f172a;
    --bgx-neutral-950:#020617;


    /* ======================================================
       SEMANTIC BACKGROUNDS
       Components should use these
    ====================================================== */

    --bgx-body:#f7f9fc;

    --bgx-surface:#ffffff;

    --bgx-surface-secondary:#f8fafc;

    --bgx-surface-tertiary:#f1f5f9;

    --bgx-card:#ffffff;

    --bgx-hover:#f8fafc;

    --bgx-overlay:
        rgba(15,23,42,.45);


    /* ======================================================
       TEXT
    ====================================================== */

    --bgx-heading:#0f172a;

    --bgx-text:#475569;

    --bgx-light-text:#64748b;

    --bgx-muted:#94a3b8;

    --bgx-disabled-text:#94a3b8;

    --bgx-text-inverse:#ffffff;


    /* ======================================================
       NAVIGATION
    ====================================================== */

    --bgx-navy:#0f172a;

    --bgx-navy-light:#1e293b;

    --bgx-navy-soft:#334155;


    /* ======================================================
       BORDERS
    ====================================================== */

    --bgx-border:#e2e8f0;

    --bgx-border-soft:#edf2f7;

    --bgx-border-dark:#cbd5e1;

    --bgx-divider:#edf2f7;


    /* ======================================================
       INPUTS
    ====================================================== */

    --bgx-input-bg:#ffffff;

    --bgx-input-bg-disabled:#f8fafc;

    --bgx-input-text:#0f172a;

    --bgx-input-placeholder:#94a3b8;

    --bgx-input-border:#e2e8f0;

    --bgx-input-border-hover:#cbd5e1;

    --bgx-input-border-focus:
        var(--bgx-primary);

    --bgx-input-focus-ring:
        var(--bgx-primary-glow);


    /* ======================================================
       STATUS COLORS
    ====================================================== */

    --bgx-success:#16a34a;

    --bgx-success-hover:#15803d;

    --bgx-success-soft:#f0fdf4;

    --bgx-success-border:#bbf7d0;


    --bgx-warning:#d97706;

    --bgx-warning-hover:#b45309;

    --bgx-warning-soft:#fffbeb;

    --bgx-warning-border:#fde68a;


    --bgx-danger:#dc2626;

    --bgx-danger-hover:#b91c1c;

    --bgx-danger-soft:#fef2f2;

    --bgx-danger-border:#fecaca;


    --bgx-info:#0284c7;

    --bgx-info-hover:#0369a1;

    --bgx-info-soft:#f0f9ff;

    --bgx-info-border:#bae6fd;


    /* ======================================================
   AUTHENTICATION THEMES
====================================================== */

/* ------------------------------------------------------
   Password Recovery
------------------------------------------------------ */

--bgx-auth-recovery-bg:
    linear-gradient(
        135deg,
        #204fcf 0%,
        #4b65df 50%,
        #6871e5 100%
    );


/* ------------------------------------------------------
   Reset Password
------------------------------------------------------ */

--bgx-auth-reset-bg:
    linear-gradient(
        135deg,
        #253fca 0%,
        #5359dc 48%,
        #7757dc 100%
    );


/* ------------------------------------------------------
   Registration
------------------------------------------------------ */

--bgx-auth-register-bg:
    linear-gradient(
        135deg,
        var(--bgx-primary) 0%,
        var(--bgx-secondary) 100%
    );


/* ------------------------------------------------------
   OTP Verification
------------------------------------------------------ */

--bgx-auth-otp-bg:
    linear-gradient(
        135deg,
        #3159e8 0%,
        #5265ef 48%,
        #7454e5 100%
    );


/* ------------------------------------------------------
   Login
------------------------------------------------------ */

--bgx-auth-login-bg:
    linear-gradient(
        135deg,
        #1f57da 0%,
        #3374e7 50%,
        #18a9c9 100%
    );


/* ------------------------------------------------------
   Shared Auth Colors
------------------------------------------------------ */

--bgx-auth-panel-text:
    var(--bgx-text-inverse);

--bgx-auth-panel-text-muted:
    rgba(255,255,255,.78);

--bgx-auth-panel-border:
    rgba(255,255,255,.18);

--bgx-auth-panel-surface:
    rgba(255,255,255,.10);

--bgx-auth-panel-surface-hover:
    rgba(255,255,255,.15);

--bgx-auth-decoration:
    rgba(255,255,255,.08);

--bgx-auth-decoration-strong:
    rgba(255,255,255,.13);

--bgx-auth-visual-bg:
    rgba(255,255,255,.10);

--bgx-auth-visual-border:
    rgba(255,255,255,.20);

--bgx-auth-visual-shadow:
    rgba(15,23,42,.16);


    /* ======================================================
       COMPONENT SURFACES
    ====================================================== */

    --bgx-card-bg:
        var(--bgx-surface);

    --bgx-card-border:
        var(--bgx-border-soft);

    --bgx-sidebar-bg:
        var(--bgx-surface);

    --bgx-sidebar-border:
        var(--bgx-border);

    --bgx-navbar-bg:
        rgba(255,255,255,.92);

    --bgx-navbar-border:
        var(--bgx-border-soft);

    --bgx-modal-bg:
        var(--bgx-surface);

    --bgx-dropdown-bg:
        var(--bgx-surface);


    /* ======================================================
       INTERACTION
    ====================================================== */

    --bgx-selection-bg:
        var(--bgx-primary-soft);

    --bgx-selection-text:
        var(--bgx-primary);

    --bgx-focus-ring:
        var(--bgx-primary-glow);


    /* ======================================================
       SHADOW COLORS
    ====================================================== */

    --bgx-shadow-color:
        rgba(15,23,42,.04);

    --bgx-shadow-color-md:
        rgba(15,23,42,.07);

    --bgx-shadow-color-lg:
        rgba(15,23,42,.10);


    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --bgx-font-family:
        "Inter",sans-serif;

    --bgx-font-xs:12px;

    --bgx-font-sm:13px;

    --bgx-font-md:14px;

    --bgx-font-lg:16px;

    --bgx-font-xl:18px;


    /* ======================================================
       RADIUS
    ====================================================== */

    --bgx-radius-sm:8px;

    --bgx-radius:10px;

    --bgx-radius-md:12px;

    --bgx-radius-lg:16px;

    --bgx-radius-xl:20px;


    /* ======================================================
       SHADOWS
    ====================================================== */

    --bgx-shadow-xs:
        0 1px 2px
        rgba(15,23,42,.03);

    --bgx-shadow:
        0 1px 2px
        var(--bgx-shadow-color),
        0 6px 18px
        var(--bgx-shadow-color);

    --bgx-shadow-md:
        0 4px 14px
        var(--bgx-shadow-color-md);

    --bgx-shadow-lg:
        0 12px 30px
        var(--bgx-shadow-color-lg);


    /* ======================================================
       LAYOUT
    ====================================================== */

    --bgx-sidebar-width:280px;

    --bgx-navbar-height:72px;


    /* ======================================================
       MOTION
    ====================================================== */

    --bgx-transition:
        all .2s ease;

}